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. 借助Maven入手Spring Boot第一个程序

    目前网上有不少Spring Boot的入门文章,都很有帮助,本人最近在深入学习Spring Cloud,在搭建第一个Hello World程序时,感觉对于新手而言,介绍文章怎么详细都不为过,因为其中坑 ...

  2. ajax请求中contentType与dataType区别

    contentType: 告诉服务器,我要发什么类型的数据,默认值: "application/x-www-form-urlencoded". dataType:告诉服务器,我要想 ...

  3. InputStream中通过mark和reset方法重复利用缓存

    通过缓存InputStream可重复利用一个InputStream,但是要缓存一整个InputStream内存压力可能是比较大的.如果第一次读取InputStream是用来判断文件流类型,文件编码等用 ...

  4. Hibernate学习（三）一对多数据的保存

    保存习惯代码 @Test public void saveTwoTableTest(){ Transaction transaction = null; try { transaction = ses ...

  5. Python基础——for/while循环

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 上学期间,常常遇到这样的情景:为了惩罚学生,老师会说:"XXX,你先去操场上跑10圈再回来继续反省.&qu ...

  6. java基础之继承（二）

    上篇我们介绍了java中的构造方法,了解了关键字this和super在继承中所起到的作用,this可以显式调用重载的构造方法,super可以显式的调用父类中的任意可见方法.了解方法重载和重写的区别,知 ...

  7. 内置函数 -- bytes -- 字节码与字符串相互转换

    说明: 1. 返回值为一个新的不可修改字节数组,每个数字元素都必须在0 - 255范围内,是bytearray函数的具有相同的行为,差别仅仅是返回的字节数组不可修改. 2. 当3个参数都不传的时候,返 ...

  8. java碎笔

    选择表达式 overviewPart1.setMonth_incom(rs.getString("month_incom").equals("")?" ...

  9. openstack-ocata-计算服务4

    一. 计算服务概览 使用OpenStack计算服务来托管和管理云计算系统.OpenStack计算服务是基础设施即服务(IaaS)系统的主要部分,模块主要由Python实现. OpenStack计算组件 ...

  10. 左连接条件与where条件的区别

    Sql 查询语句应用左连接时的链接条件中经常加一些常量值在里面如: "On a.id= b.id and b.is_del =0 and b.is_old =1" 这种条件如果加在 ...