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. PHPUnit-附录 C. XML 配置文件

    [http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.configuration.html] PHPUnit <phpunit> 元素的属性 ...

  2. python入门学习笔记（三）

    10.函数 求绝对值的函数 abs(x) 也可以在交互式命令行通过 help(abs) 查看abs函数的帮助信息.调用 abs 函数:>>> abs(100)100>>& ...

  3. [翻译]编写高性能 .NET 代码 第一章：工具介绍 -- Visual Studio

    <<返回目录 Visual Studio vs虽然不是全宇宙唯一的IDE,但它是.net开发人员最常用的开发工具.它自带一个性能分析工具,你可以使用它来做开发,不同的vs版本在工具上会略有 ...

  4. iOS原生和H5的相互调用

    为什么现在越来越多的APP中开始出现H5页面? 1,H5页面开发效率更高,更改更加方便: 2,适当缩小APP安装包的大小: 3,蹭热点更加方便,比如五一,十一,双十一搞活动: 那么为什么说H5无法取代 ...

  5. 两种实现方式mycat多租户,枚举分片,注解拦截

    第一种: 优点:支持进一步分片 缺点:schema配置繁琐 注解式  /*!mycat:schema=[schemaName] */   注意:这在navicat 里面是会报错的,请用命令行登陆myc ...

  6. docker-compose 完整打包发布, 多服务,多节点SPRING CLOUD ,EUREKA 集群

    这里不再使用 端口映射的方式,因为不同主机上,Feign 根据 docker hostname访问会有问题. 把打包的好jar copy到docker镜像里 有几个服务,就复制几个dockerfile ...

  7. linux 分布式文件系统

    分布式文件系统(DFS) 指文件系统管理的物理存储资源不一定直接连接在本地节点上 而是通过计算机网络与节点相连 分布式文件系统的设计基于客户机/服务器模式 一个典型的网络可能包括多个多个用户访问的服务 ...

  8. Centos 6.5升级openssh漏洞

    CentOS 6.5下openssh升级 在有的企业中每年都会安全扫描,因为实现远程连接比较重要,如果openssh版本过低,就要对其升级,本文主要讲述openssh升级的步骤. openssh升级主 ...

  9. linux系统/sbin/init执行过程

    对于Linux的启动过程,之前一直都是研究到内核运行/sbin/init,启动第一个用户进程为止,因为这部分一直都是在内核态工作,所以对于学习内核还是有帮助的,当时/sbin/init之后的过程也需要 ...

  10. Ubuntu的shell之bash和dash

    Ubuntu的 shell 默认安装的是 dash,而不是 bash. 运行以下命令查看 sh 的详细信息,确认 shell 对应的程序是哪个: $ls -al /bin/sh dash 比 bash ...