• jquery的事件对象


    jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装。

    screenX和screenY  对应屏幕最左上角的值
    clientX和clientY 距离页面左上角的位置(忽略滚动条)
    pageX和pageY  距离页面最顶部的左上角位置(会计算滚动条的位置)
    event.keyCode 按下的键盘代码
    event.data  存储绑定事件时传递的附加数据

    以上几种不详细说了,接下来说一下下面的几种:

    event.stopPropagation(); //阻止事件冒泡行为
    event.preventDefault(); //阻止浏览器默认行为
    return false;//既能阻止事件冒泡,又能阻止浏览器默认行为

    来看简单小例子,a标签的href里面传链接即可跳转,来看代码:

    <a href="http://www.cnblogs.com/web001/">点击</a>
    以上是html的a标签
    
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("a").on("click",function(e){
                alert("麦兜");
            });
    
            $("body").on("click",function(){
                alert("呵呵");
            })
    
        })
    </script>

    那么它的执行结果肯定是先弹出“麦兜”再弹出“呵呵”,然后跳转http://www.cnblogs.com/web001/这个链接,若是不想跳转走的话,那就要这么写:

    $("a").on("click",function(e){
                alert("麦兜");
                e.preventDefault();//阻止浏览器的默认行为
            });
            $("body").on("click",function(){
                alert("呵呵");
            })

    那若是不让弹出“呵呵”的话就要这样写:

    $("a").on("click",function(e){
                alert("麦兜");
                e.stopPropagation(); //阻止事件冒泡
            });
            $("body").on("click",function(){
                alert("呵呵");
            })

    若是既不让链接跳转也不让弹出“呵呵”,那么就要这样写:

         $("a").on("click",function(e){
                alert("麦兜");
                return false;//既能阻止冒泡,也能阻止浏览器默认行为
            });
            $("body").on("click",function(){
                alert("呵呵");
            })

    所以,以上的几个方法可以灵活运用,根据实际情况实际运用。

  • 相关阅读:
    java 获取文本一行一行读
    postman 测试api接口
    MariaDB 默认是禁止远程访问的 我们改掉它
    mysql 查询近三个月数据
    Springboot配置拦截器
    springboot 基于@Scheduled注解 实现定时任务
    springboot 配置访问本地图片
    springboot上传文件大小限制的配置
    vue中toggle切换的3种写法
    vue怎么给自定义组件绑定原生事件
  • 原文地址:https://www.cnblogs.com/web001/p/8470744.html
Copyright © 2020-2023  润新知