zoukankan      html  css  js  c++  java
  • js 冒泡事件的处理

    onMouseOver 和 onMouseOut事件冒泡

          当事件在某一DOM元素被触发时,例如用户在某个节点上点击鼠标,事件将跟随着该节点继承的各个父节点冒泡穿过整个DOM的节点层次,直到它遇到依附有该事件类型处理的父节点,HTML是层次结构内层的事件能够被传播到外层,我们称之为事件冒泡。

    <div onclick="testClick(event);">  
        <table border="1">  
            <tr>  
                <td>this a td element</td>  
                <td id="output">nothing</td>  
            </tr>  
        </table>  
    </div>  

    当鼠标点击<td>this a td element</td>元素时,会触发testClick事件,即事件冒泡到div元素。


    onMouseOut鼠标移出冒泡解决代码

    function d_1(obj,e)
    {
    	var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
    	while(relatedTarget && relatedTarget != obj)
    	relatedTarget = relatedTarget.parentNode;
    	if(!relatedTarget)
           {
            obj.className="d_2_1"
           }
    }  

    在需要移出的元素上 绑定onMouseOut="d_1(this,event)移出事件。

    如:

    <div class="d_2" id="d_2" onMouseOut="d_1(this,event)">

    鼠标移出div.id为"d_2"里面的子元素节点时将不会触发d_1()函数,只有移出div"d_2"本身才会。

    <div />

  • 相关阅读:
    JPA唯一索引更新删除的问题
    java8时间类的一些封装
    windows 下面必备软件
    YAPI工具在SpringMVC下的使用需要注意的一些问题
    软件
    sublime常用快捷键
    nio学习
    springboot集成rabbitmq的一些坑
    maven子项目的springboot配置
    RabbitMQ 学习
  • 原文地址:https://www.cnblogs.com/ChangeNow/p/3612154.html
Copyright © 2011-2022 走看看