zoukankan      html  css  js  c++  java
  • 解决问题:页面中存在两个冲突事件,如何处理

    详细描述一下问题,有两个事件,一个是input丢失焦点事件A,一个是button的点击事件B,当input获取到焦点时,再去点击button,这样会直接触发A事件,无法触发B事件。

    网上搜了好多,经过一一鉴别,貌似都不管用,不知道是不是我测试的姿势不对。

    最终将button的点击事件改为了鼠标点下的事件,也就是onmousedown事件,最终解决了。

    因为啥呢,主要是onclick = onmousedown + onmouseup ,也就是说我直接在鼠标起来之前就把事件提前触发了,应该就跑在了失去焦点事件前边,所以就会先执行onmousedown的事件,然后再执行input的失去焦点事件。

    具体代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>测试双事件冲突</title>
        </head>
        <body>
            <div>
                <button onblur="loseMe()">不要离开我</button>
                <button onmousedown="clickMe()">快点点我</button>
            </div>
            <script>
                function loseMe(){
                    alert("不要离开我")
                }
                function clickMe(){
                    alert("点了我一下")
                }
                
            </script>
        </body>
    </html>

    效果图:

     

  • 相关阅读:
    Java开发web的几种开发模式
    Tomcat7.0安装配置
    Apache与Tomcat 区别联系
    编写 Window 服务程序
    系列文章--SharePoint 开发教程
    Google Chrome浏览器调试功能介绍
    Chrome的JS调试工具
    Google Chrome 调试JS简单教程[更新]
    ASP.NET常用标准配置web.config
    WINDOWS下kill进程的命令
  • 原文地址:https://www.cnblogs.com/qcq0703/p/14455020.html
Copyright © 2011-2022 走看看