angular 按下回车键触发事件

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

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

html代码:

<input type="text" placeholder="支持空格及英文逗号分隔"

ng-model="ipAdress"

required

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" >百度</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" >
<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  onclick="alert(this.id)" >
 <p>This is parent1 div.</p>
 <div  onclick="alert(this.id)" >
  <p>This is child1.</p>
 </div>
 <p>This is parent1 div.</p>
</div>
<br />
<div  onclick="alert(this.id)" >
 <p>This is parent2 div.</p>
 <div  onclick="doSomething(this,event);" >
  <p>This is child2. Will bubble.</p>
 </div>
 <p>This is parent2 div.</p>
</div>
</body>
</HTML>