zoukankan      html  css  js  c++  java
  • angular 按下回车键触发事件

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

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

    html代码:

    <input type="text" placeholder="支持空格及英文逗号分隔"
    ng-model="ipAdress"
    required
    style="display: inline-block;height: 37px; 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="250px;background-color:yellow">
     <p>This is parent1 div.</p>
     <div id="child1" onclick="alert(this.id)" style="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="250px;background-color:cyan;">
     <p>This is parent2 div.</p>
     <div id="child2" onclick="doSomething(this,event);" style="200px;background-color:lightblue;">
      <p>This is child2. Will bubble.</p>
     </div>
     <p>This is parent2 div.</p>
    </div>
    </body>
    </HTML> 
  • 相关阅读:
    vue基础笔记
    HM.DAY-02
    前端基础(三)
    前端基础 (二)
    前端基础(一)
    爬虫基础入门(二)
    爬虫基础入门(一)
    Python进阶(三)
    Python进阶(二)
    python切片
  • 原文地址:https://www.cnblogs.com/shixy1617/p/7804308.html
Copyright © 2011-2022 走看看