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. 洛谷P1345 [USACO5.4]奶牛的电信Telecowmunication【最小割】分析+题解代码

    洛谷P1345 [USACO5.4]奶牛的电信Telecowmunication[最小割]分析+题解代码 题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流. ...

  2. maven配置全局的jdk和配置局部的jdk

    配置全局的jdk需要修改maven的setting.xml文件 <profile> <id>jdk17</id> <activation> <ac ...

  3. 五分钟了解Hash算法

    Hash算法详解 想象一下如果高级语言(Java,C++ ,C#)中如果没有实现类似List.Map等数据结构,企业级应用开发将是多么痛苦的事吧? Key-Value这种数据结构对于数据处理非常方便. ...

  4. Servlet3.0上传图片示例

    一.前端JSP页面 <%@page pageEncoding="UTF-8"%><!DOCTYPE html><html><head> ...

  5. echarts legend 重叠 （转载）

    解决方案:  1. 调整option中的grid.top值才能避免重叠:(可以设置定制,也可以定义了一个计算公式) 2. 文档注明[特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的 ...

  6. qemu-trustzone编译&运行（包含linux内核的编译方法）

    由于之前都是用的mtk6797开发板,回到实验室之后想要做实验的话需要弄一个支持trustzone的qemu,在这里记录一下我的编译和调试过程.本来最近一直忙着看论文和写论文,但是忽然发现自己在实验部 ...

  7. Eclipse中如何忽略报错的js文件

    https://jingyan.baidu.com/article/4f7d5712d3701a1a20192786.html

  8. requests+多进程poll+pymongo实现抓取小说

    今天看着有个很吸引人的小说作品信息:一家只在深夜开门营业的书屋,欢迎您的光临.作为东野奎吾<深夜食堂>漫画的fans,看到这个标题按捺不住我的好奇心........ 所以我又抓下来了,总共 ...

  9. 转 Caffe学习系列(9)：运行caffe自带的两个简单例子

    为了程序的简洁,在caffe中是不带练习数据的,因此需要自己去下载.但在caffe根目录下的data文件夹里,作者已经为我们编写好了下载数据的脚本文件,我们只需要联网,运行这些脚本文件就行了. 注意: ...

  10. redis分布式锁的几种实现方式，以及Redisson的配置和使用

    最近在开发中涉及到了多个客户端的对redis的某个key同时进行增删的问题.这里就会涉及一个问题:锁 先举例在分布式系统中不加锁会出现问题: redis中存放了某个用户的账户余额 ,例如100 (用户 ...