阻止mouseover冒泡行为_onmousedown是什么意思

阻止mouseover冒泡行为_onmousedown是什么意思一.onmouseenter、onmouseoveronmouseenter事件在鼠标指针进入到绑定事件的那个元素上时触发。该事件通常与onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发)事件一同使用。onmouseenter事件类似于onmouseover事件。唯一的区别是onmouseenter事件不支持冒泡。二.实例演示onmousemov…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一. onmouseenter、onmouseover

onmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。
该事件通常与 onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发) 事件一同使用。
onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡

二. 实例演示onmousemove, onmouseenter 和 mouseover 事件的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
            float: left;
            padding: 30px;
            text-align: center;
            background-color: lightgray;
        }
        p {
            background-color: white;
        }
    </style>
</head>
<body>
    <h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3> 
    <p> onmousemove 事件在鼠标移动到 div 元素上就开始时触发,在这个div上移动一直触发(冒泡)。</p> 
    <p> mouseenter 事件中有在鼠标指针进入 div 元素时触发(不冒泡)。 </p> 
    <p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)(冒泡)。</p> 
    <hr>
    <div onmousemove="myMoveFunction()"> 
    <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p> </div> 
    <div onmouseenter="myEnterFunction()"> <p>onmouseenter: <br> <span id="demo2">标移动到我这!</span></p> </div> 
    <div onmouseover="myOverFunction()"> <p>onmouseover: <br> <span id="demo3">标移动到我这!</span></p> </div> 
</body>
<script>
    var x = 0,y = 0,z = 0;
    
    function myMoveFunction() {
        document.getElementById("demo").innerHTML = z+=1;
    }
    
    function myEnterFunction() {
        document.getElementById("demo2").innerHTML = x+=1;
    }
    
    function myOverFunction() {
        document.getElementById("demo3").innerHTML = y+=1;
    }
</script>
</html>
<!DOCTYPE html> 

阻止mouseover冒泡行为_onmousedown是什么意思

其中:
1. onmousemove 事件在鼠标移动到 div 元素上时触发,鼠标在div、p、span元素内移动(即白框内也会触发,事件冒泡到父级div);
2. mouseenter 事件中有在鼠标指针进入 div 元素时触发,鼠标进入p、span元素内不会触发,因为不支持事件冒泡;
3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span),因为事件冒泡到父级div。

参考解析Javascript事件冒泡机制https://blog.csdn.net/luanlouis/article/details/23927347 (建议查看)

三. 事件冒泡

比如说父元素添加了onclick事件,当子元素发生onclick事件时,父元素的onclick事件也会触发。

四. 终止事件冒泡

方式一:   

    event.stopPropagation()
    在子元素相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。

方式二:
    if(event.target == event.currentTarget) {    ……}
    事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以通过这 两个target 是否相等。event.target永远是直接接受事件的目标DOM元素。

document.getElementById("box1").addEventListener("click",function(event){ 
    if(event.target == event.currentTarget) { 
        alert("您好,我是最外层div。"); 
    }
}); 

比较:
从事件传递上看:方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再向上传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递;
分析方法二,既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.target 然后对不同的target产生不同的行为。
 

window.onload = function() { 
    document.getElementById("body").addEventListener("click",eventPerformed()); } 
    function eventPerformed(event) { 
        var target = event.target; 
        switch (target.id) { 
            case "span": 
            alert("您好,我是span。"); 
            break; 
            case "box2": 
            alert("您好,我是第二层div。"); 
            break; 
            case "box1": 
            alert("您好,我是最外层div。"); 
            break; 
        } 
    } 
}

即将每一个元素都处理事件的模式改成有上层节点统一处理事件,通过事件发生的不同节点执行不同行为。这个模式,就是所谓的事件委托

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184717.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Jenkins安装_jenkins入门

    Jenkins安装_jenkins入门前言jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境。环境准备:mac/Linuxdockerdocker拉去jenkins镜像先下载jenkins镜

  • 使用Matlab对数据归一化

    使用Matlab对数据归一化前言在使用机器学习做分类和回归分析时,往往需要对训练和测试数据首先做归一化处理。这里就对使用MATLAB对数据进行归一化方法做一个小总结。为什么进行归一化一般做机器学习应用的时候大部分时间是花费在特征处理上,其中很关键的一步就是对特征数据进行归一化。关于为什么进行归一化处理维基百科给出的解释是:1)归一化后加快了梯度下降求最优解的速度;2)归一化有可能提高精度。具体介绍:https://w…

  • hadoop是什么意思_hadoop三大组件

    hadoop是什么意思_hadoop三大组件Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。[1]Hadoop实现了一个分布式文件系统(HadoopDistributedFileSystem),简称HDFS。HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上;而且它提供高吞吐量(highthro

  • 谷歌官方发布Android版Buzz[通俗易懂]

    谷歌官方发布Android版Buzz[通俗易懂]3月19日,据外媒报道,谷歌公司近日推出Android版谷歌Buzz。  据悉,谷歌Buzz的Android版本目前只支持英文版,而且至少是Android1.6。  消息称,谷歌Buzz在Android平台上的应用非常稳定,可以与谷歌地图相接,随时切换显示用户发布内容的地址,可以直接上传文字和照片,无需其他App软件辅助。(完)

    2022年10月10日
  • javaWeb实现qq邮箱验证(二)「建议收藏」

    javaWeb实现qq邮箱验证(二)「建议收藏」上篇写的实现基本上是一个工具类,并没封装成下图这样方式(梨视频注册界面),现在开始完善上篇的java邮箱激活验证功。java邮箱验证地址:https://blog.csdn.net/BlackPlus28/article/details/85044068———————————————————————…

  • java countdowntimer_Android 倒计时CountDownTimer[通俗易懂]

    java countdowntimer_Android 倒计时CountDownTimer[通俗易懂]image.png美工妹子给的图如下,订单在创建时间的24小时后进行关闭业务逻辑从后台返回来的订单创建时间加24小时后减去你当下的时间就是相差的总共时间,然后进行倒计时倒计时结束后上传订单关闭标识,改变状态页实现思路可能在没有遇到CountDownTimer之前,我们都是创建Handle来开启异步线程来处理,如果你现在使用,我只能说太菜了,官方已经为我们封装好了一个类,爽的很,一起来看@Overr…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号