美文网首页
鼠标事件执行顺序

鼠标事件执行顺序

作者: Lisa_Guo | 来源:发表于2021-04-14 18:14 被阅读0次

原文:https://blog.csdn.net/LzzMandy/article/details/98847681
1、div元素的执行顺序:
mouseover--> mousedown-->mouseup-->click -->mouseout

2、input、checkbox 、select 元素执行顺序:
mouseover--> mousedown-->focus-->mouseup-->click -->mouseout-->blur

3、先点击input再点击div时,整个执行顺序是:

input----mousedown-->

input----focus-->

input----mouseup-->

input----click-->

div---mousedown-->

input----blur-->

div---mouseup-->

div---click

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            // div 元素执行顺序
            // mouseover-->mousedown-->mouseup-->click-->mouseout
            $("#div1").mouseover(function(e){
                console.log("mouseover mouseover mouseover");
            });
            $("#div1div1").mousedown(function(e){
                console.log("mousedown mousedown mousedown");
            });
            $("#div1").mouseup(function(e){
                console.log("mouseup mouseup mouseup");
            });
            $("#div1").click(function(e){
                console.log("click click click");
            });
            $("#div1").mouseout(function(e){
                console.log("mouseout mouseout mouseout");
            });
  
             
            // input、checkbox 、select 元素执行顺序
            // mouseover-->mousedown-->focus-->mouseup-->click-->mouseout-->blur
            $("#input1").mouseover(function(e){
                console.log("mouseover mouseover mouseover");
            });
            $("#input1").mousedown(function(e){
                console.log("mousedown mousedown mousedown");
            });
            $("#input1").focus(function(e){
                console.log("focus focus focus");
            });
            $("#input1").mouseup(function(e){
                console.log("mouseup mouseup mouseup");
            });
            $("#input1").click(function(e){
                console.log("click click click");
            });
            $("#input1").mouseout(function(e){
                console.log("mouseout mouseout mouseout");
            });
            $("#input1").blur(function(e){
                console.log("blur blur blur");
            });
        });
    </script>
    <style type="text/css">
    #div1{
        width: 200px;
        height: 100px;
        background: yellow;
        margin-bottom: 20px;
    }
    #input1{
        width: 200px;
        height: 50px;
        background: yellow;
        margin-bottom: 20px;
    }
    #select1{
        width: 200px;
        height: 50px;
        background: yellow;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
    <div id="div1">鼠标事件</div>
    <input id="input1" type="text" value="aaa">
    <select id="select1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
</body>

相关文章

  • 鼠标事件执行顺序

    原文:https://blog.csdn.net/LzzMandy/article/details/9884768...

  • 05关于鼠标的事件

    关于下拉框的事件 下拉框的弹出实际是通过mousedown进行控制的 鼠标执行的顺序mousedonw,mouse...

  • js的事件种类整理

    鼠标事件 (继承MouseEvent接口) 触发顺序: mouseDown > mouseup > click >...

  • Javascript 事件冒泡和捕获的一些探讨

    事件的执行顺序

  • 触摸事件

    MDN API Event Order 事件顺序 正常执行顺序: 触摸被取消的执行顺序: Interfaces 接...

  • 点击穿透原理及解决

    一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、...

  • 1.4 GUI - 鼠标事件

    简单的栗子 首先,我们创建一个鼠标回调函数,当鼠标事件发生时执行该函数。鼠标事件可以是与鼠标相关的任何事件,如左键...

  • IE中attachEvent的坑

    this值为window 事件捕获阶段处理事件 多个事件按添加顺序相反的顺序执行

  • js 事件执行顺序

    为什么需要addEventListener? 先来看一个片段: html代码 事件执行顺序 用on的代码 wind...

  • 散记(三)

    鼠标事件contextmenu 当用户在指定元素上右击鼠标时执行object.oncontextmenu=func...

网友评论

      本文标题:鼠标事件执行顺序

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