angularJs  按下回车键触发事件这个功能很简单，但是今天的却让我掉坑很久。。。。

由于我的页面上有两个不同方法都传$event事件，如search($event)和create($event);

html代码：

<input type="text" placeholder="支持空格及英文逗号分隔"
ng-model="ipAdress"
required
style="display: inline-block;height: 37px;width: 96%;float: left;"
ng-keypress="($event.which === 13)?search($event):0"/>

我用的是ng-keypress方法，search（$event）是我想要按下回车触发的函数，传值$event是为了在search函数执行时阻止默认事件。

js处理：

function search($event){
　    //to do someing.........

　　$event.preventDefault();//阻止默认事件（如果不写这个create($event)函数里边的内容也会执行）
}

强调：这里必须用preventDefault()方法，而不是stopPrapagation();这两个是不同的；这里我给大家简单普及一下。

严格来说stopPropagation与preventDefault其实没什么关系，一个是停止传播事件，一个是阻止默认的行为（如<a>标签的地址跳转等）。

用下边例子给大家演示一下就知道了。

preventDefault()方法示例：

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS阻止链接跳转</title>

<script type="text/javascript">

function stopDefault( e ) {

if ( e && e.preventDefault )

   e.preventDefault();

    else

   window.event.returnValue = false; 

    return false;

}

</script>

</head>

<body>

<a href="http://www.baidu.com" id="testLink">百度</a>

<script type="text/javascript">

var test = document.getElementById('testLink');

test.onclick = function(e) {

   alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');

   stopDefault(e);

}

</script>

</body>

</html>
stopPropagation()用法示例：

<!DOCTYPE>

<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">

<head>

<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>

<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />

<script>

function doSomething (obj,evt) {

 alert(obj.id);

 var e=(evt)?evt:window.event;

 if (window.event) {

  e.cancelBubble=true;// ie下阻止冒泡

 } else {

  //e.preventDefault();

  e.stopPropagation();// 其它浏览器下阻止冒泡

 }

}

</script>

</head>

<body>

<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">

 <p>This is parent1 div.</p>

 <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">

  <p>This is child1.</p>

 </div>

 <p>This is parent1 div.</p>

</div>

<br />

<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">

 <p>This is parent2 div.</p>

 <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">

  <p>This is child2. Will bubble.</p>

 </div>

 <p>This is parent2 div.</p>

</div>

</body>

</HTML>

angular 按下回车键触发事件的更多相关文章

  1. jsp页面_按回车键触发事件

    一般在列表页面中,都会带有查询按钮,当输入完查询条件后,如果需要通过鼠标点击"查询"按钮才发起查询,那么就感觉不够方便,那么我们就可以修改为按下回车键的时候发起查询. <sc ...

  2. javascript按回车键触发事件

    <form id="search-form" > <input type="text" onkeypress="getKey();r ...

  3. javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

    1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...

  4. 按下enter触发事件

    原理:按下enter的事件属于键盘事件,我们可以先用下面函数来获取enter的键码(键盘上的按键都有各自的键码),通过这个键码可以来判断按下的是哪个键 document.addEventListene ...

  5. js设置回车键触发事件

    设置按回车键时触发查询事件: document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.key ...

  6. jquery实现回车键触发事件

    键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event ...

  7. 【转】jsp 页面 按回车键 触发事件

    转载: https://blog.csdn.net/ludongshun2016/article/details/59536779. 第一种: <script type="text/J ...

  8. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  9. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

随机推荐

  1. Thinkpad USB 经典键盘使用体验

    先上图,这就是一个键盘,不是笔记本电脑. 优点: 1. 键盘完胜各类巧克力式键盘. 2. 小红点和老thinkpad 上的小红点一样好用. 3. ESC 和Delete 放大后,盲摸很方便. 缺点: ...

  2. iOS 添加WKWebView导致控制器无法释放的问题

    在WkWebView与JavaScript交互中,经常会在原生中注入MessageHandler,app中注入MessageHandler的方法 WKWebViewConfiguration *con ...

  3. django-站点管理

    站点管理--超级用户的管理界面,可以让你添加,删除,管理网站内容: 一.激活管理界面 1.在settings.py中进行如下配置: INSTALLED_APPS = ( 'django.contrib ...

  4. PHP不使用array_merge函数实现一维数组合并

    function array_mer() { $arrays = func_get_args(); //获取当前函数中传递进来的所有参数,也就是所有一维数组 // echo '<pre>' ...

  5. C语言_简单了解一下typedef

    作为一名PHPer,了解一下C还是有必要的,只是做一个简单的了解,因为并没有做开发C的想法. 关于typedef的详细说明,网上搜过了很多帖子,这篇算是最详细的了:http://blog.csdn.n ...

  6. 缩减APK包大小

    1)开启minifyEnabled 开启混淆,删除没用的java文件 2)开启shrinkResources 去除无用资源 3)resConfigs "zh" 删除无用的语言资源 ...

  7. 转载微信公众号 测试那点事：Jmeter乱码解决

    原文地址: http://mp.weixin.qq.com/s/4Li5z_-rT0HPPQx9Iyi5UQ  中文乱码一直都是比较让人棘手的问题,我们在使用Jmeter的过程中,也会遇到中文乱码问题 ...

  8. Centos中hive/hbase/hadoop/mysql实际操作及问题总结

    目录 Hive中文乱码问题 hive和hbase的版本不一致 Ambari hive插入Hbase出错 Hive0.12和Hbase0.96不兼容,重新编译hive0.12.0 hiveserver不 ...

  9. java线程池技术(二)： 核心ThreadPoolExecutor介绍

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程池技术属于比较"古老"而又比较基础的技术了,本篇博客主要作用是个人技术梳理,没什么新玩意. 一.Java线程池技术的 ...

  10. 小说接入UC浏览器内核技术对话（一）

    质辛@灿岩 质辛跟我们说一下那个删除文件的逻辑吧质辛@灿岩  应该不是删除cache下所有文件吧?质辛@智鹰  提供一下我们的临时文件完整路径给 灿岩吧质辛@智鹰  是负责我们ucsdk的 技术对接灿 ...