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. 实现dedecms全站动态浏览 并实现伪静态

    dedecms默认是生成静态文件,如何实现织梦全站动态浏览呢? 织梦全站动态浏览方法 1. 修改首页为动态浏览 后台-生成-更新首页-勾选"仅动态浏览" 2. 修改栏目页为动态浏览 ...

  2. nodejs和npm的安装

    下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrz ...

  3. egametang网络系统组件

    先看一下网络组件的中层: AService抽象了udp和tcp协议的连接工厂,udp的连接方式也被封装的和tcp类似,但是一个接收连接的UService只能建立一个连接.这个接口既可以做服务端通过Ac ...

  4. 【Unity3D技术文档翻译】第1.4篇 AssetBundle 依赖关系

    上一章:[Unity3D技术文档翻译]第1.3篇 创建 AssetBundles 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Develo ...

  5. asp.net core 使用 swagger 生成接口文档

    参考地址:http://www.cnblogs.com/daxnet/p/6181366.html http://www.jianshu.com/p/fa5a9b76f3ed 微软参考文档:https ...

  6. linux 获取CPU个数

    #include<stdio.h> #include<unistd.h> int main() { int cpu_num; cpu_num = sysconf(_SC_NPR ...

  7. lnmp HTTP ERROR 500

    http://www.cnblogs.com/thrillerz/p/4725409.html

  8. angular aot编译报错 ERROR in ./src/main.ts 解决方法

    昨天打包项目时遇到下图这样的错误: 开始以为了某些模块存在但未使用,折腾一番无果,后来升级angular-cli就搞定了,方法很简单: 1.删掉node_modules 2.更改package.jso ...

  9. CodeForces - 796C Bank Hacking

    思路:共有n-1条边连接n个点,即形成一棵树.一开始需要选择一个点hack--将这个点视为根结点,与它相邻的点防御值加1,与它相隔一个在线点的点的防御也加1.当根节点被hack,即这个点被删除,又变成 ...

  10. JSP的内置对象以及作用域。

    最近在面试,一些基础的问题总是会被问到,虽然是基础,但是有些东西在工作中用的少,所以就有些记不清了,在面试的时候更因为紧张很容易造成原先知道的知识也会突然忘了的情况发生.所以在重新组织一下jsp的内置 ...