美文网首页
2018-12-19 总结能获取mouseEvent默认参数

2018-12-19 总结能获取mouseEvent默认参数

作者: 小猪夫人hj | 来源:发表于2018-12-19 17:24 被阅读0次

    <div onclick="parentBubble()">
    <p id="showp">点我阻止冒泡</p>
    </div>

    1. 获取dom元素

    x = document.getElementById("showp");

    1-1)方式如下可以获取到mouseEvent

          x.addEventListener('click', function stopBubble(ev) {
                console.log(ev);  //可以获取到mouseEvent
                ev.stopPropagation(); //阻止冒泡,非IE方法
            }, false/true);
    

    1-2)方式如下也可以获取到

            x.addEventListener('click', stopBubble,false/true);
            function stopBubble(ev) {
                  alert(ev);     //可以获取到mouseEvent
                  ev.stopPropagation(); 
             }
    

    1-3)下面也可以

            x.onclick = function(ev) {
                console.log(ev);   //可以获取到mouseEvent
                ev.stopPropagation();
            }
    

    2. 在DOM元素中添加onclick="stopBubble()",注意此处括号必须加,否则不执行,此时方法中是获取不到mouseEvent的,但是可以获取到window的event,如下设置:

           function play() {
                   var ev = window.event;
                   console.log(ev);
        }
    

    还可以在方法中加入event参数 onclick="stopBubble(event)",像这样

           function stopBubble(ev){
                console.log(ev);   //可以获取到
           }
    

    3. jquery中? 答案是可以的。

    3-1).click

            $(function() {
                    // debugger;
                    $('#showp').click(function(ev) {
                             alert(ev)    //可以获取到mouseEvent
                     })
             })
    

    3-2) .on

             $(function() {
                     // debugger;
                      $('#showp').on('click', function(ev) {
                             alert(ev);       //可以获取到mouseEvent
                       })
               })
    

    4. vue中@click="func($event)"

            function func(ev){
                     alert(ev);   //可以获取到mouseEvent
            }
    

    相关文章

      网友评论

          本文标题:2018-12-19 总结能获取mouseEvent默认参数

          本文链接:https://www.haomeiwen.com/subject/hmijkqtx.html