`

js mouseover 改 mouseleave 、鼠标事件

 
阅读更多

示例引用:

         http://www.jsfoot.com/jquery/demo/2011-09-06/170.html

 

  <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="scripts/jquery.onImagesLoad.js"></script>
  <script type="text/javascript" src="scripts/jScrollPane.js"></script>

 

/**
       * 用于检查一个对象是否包含在另外一个对象中
       * @method contains 
       * @param {string} parentNode 父节点
       * @param {string} childNode 子节点
    */
    function contains(parentNode, childNode) { 
        if (parentNode.contains) { 
            return parentNode != childNode && parentNode.contains(childNode); } 
        else { 
            return !!(parentNode.compareDocumentPosition(childNode) & 16); 
        } 
    }
    /**
       * 用于检查鼠标是否真正从外部移入或者移出对象的
       * @method checkHover 
       * @param {string} e 当前的事件对象
       * @param {string} target 目标对象
       * @param {string} relatedTarget 属性代表的就是鼠标刚刚离开的那个节点,当触发mouseout事件时它代表的是鼠标移向的那个对象。
       * 由于MSIE不支持这个属性,不过它有代替的属性,分别是 fromElement和toElement
    */
    function checkHover(e,target){
        var rel = getEvent(e).relatedTarget ,
        from = getEvent(e).fromElement ,
        to = getEvent(e).toElement;
        if (getEvent(e).type=="mouseover")  {
            return !contains(target,rel||from) && !( (rel||from)===target );
        } else {
            return !contains(target,rel||to) && !( (rel||to)===target );
        }
    }
    /**
       * 用于在MSIE或者FF下返回一个可用的event对象
       * @method getEvent 
       * @param {string} e 当前的事件对象
    */
    function getEvent(e){
        return e||window.event;
    }

   for(var i=0;i<len;i++){
            $(liItem).$(i).addEvent("mouseover",function(e){
                if(checkHover(e,this)){
                    $(this).$(".add-focusS").addCss("display:block;");
                }
            });
            $(liItem).$(i).addEvent("mouseout",function(e){
                if(checkHover(e,this)){
                    $(this).$(".add-focusS").addCss("display:none;");
                }
            });
        }

 

onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove IE4|N4|O 鼠标移动时触发的事件

onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件

onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]

onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]

onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

 

页面相关事件 事件 浏览器支持 描述

onAbort IE4|N3|O 图片在下载时被用户中断

onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件

onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误

onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成

onMove IE|N4|O 浏览器的窗口被移动时触发的事件

onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件

onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件

onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断

onUnload IE3|N2|O3 当前页面将被改变时触发的事件

 

表单相关事件 事件 浏览器支持 描述

onBlur IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]

onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件

onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件

onSubmit IE3|N2|O3 一个表单被递交时触发的事件

 

滚动字幕事件 事件 浏览器支持 描述

onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件

onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件

onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件

 

编辑事件 事件 浏览器支持 描述

onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴时触发的事件

onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态

onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件

onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象

onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]

onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件

onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件

onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]

onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧

onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了

onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件

onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件

onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件

onDragStart IE4|N|O 当某对象将被拖动时触发的事件

onDrop IE5|N|O 在一个拖动过程中,释放鼠标键时触发的事件

onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件

onPaste IE5|N|O 当内容被粘贴时触发的事件

onSelect IE4|N|O 当文本内容被选择时的事件

onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件

 

数据绑定 事件 浏览器支持 描述

onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件

onCellChange IE5|N|O 当数据来源发生变化时

onDataAvailable IE4|N|O 当数据接收完成时触发事件

onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件

onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件

onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件

onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件

onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件

onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件

onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件

 

数据绑定 事件 浏览器支持 描述

onAfterPrint IE5|N|O 当文档被打印后触发的事件

onBeforePrint IE5|N|O 当文档即将打印时触发的事件

onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件

onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件

onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件

onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件

分享到:
评论

相关推荐

    【JavaScript源代码】ECharts鼠标事件的处理方法详解.docx

    鼠标事件即鼠标操作点击图表的图形(如click、dblclick、contextmenu)或hover图表的图形(如mouseover、mouseout、mousemove)时触发的事件。 在ECharts中,用户的任何操作,都可能会触发相应的事件。在ECharts中...

    关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    mouseover ,mouseout ,mouseenter,mouseleave,都是鼠标点击而触发的事件,各自代表什么意思,有哪些区别呢?下面跟着脚本之家小编一起看看吧

    javascript 鼠标事件总结

    mouseover:鼠标移到目标的上方。 mouseout:鼠标移出目标的上方。 mousemove:鼠标在目标的上方移动。 mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown =&gt; mouseup =&gt; click。因此一个...

    经过绑定元素时会多次触发mouseover和mouseout事件

    jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouse...

    jQuery的mouseover操作div

    鼠标在移入到td上面之后,在td的相对位置浮动出一个div,基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。

    Web前端开发基础:使用JavaScript实现验证效果.ppt

    2 教学内容 1 单元目标 3 动手实践 4 课堂小结 教学内容 事件的含义 JavaScript事件处理 JavaScript表单事件 JavaScript鼠标事件 JavaScript键盘和窗口事件 综合应用 事件是一些可以通过脚本响应的页面动作。...

    详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子...

    javascript中mouseover、mouseout使用详解

    在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法,这两个事件只有ie支持,其他浏览器不支持。 但是我在最新版本的火狐与谷歌都支持了mouseenter 与 mouseleave!!!!! 另外ie是...

    javascript中mouseenter与mouseover的异同

    不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...

    javascript mouseover、mouseout停止事件冒泡的解决方案

    停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。

    jQuery中mouseover事件用法实例

    主要介绍了jQuery中mouseover事件用法,以实例形式分析了mouseover事件处理鼠标指针滑过时的使用技巧,需要的朋友可以参考下

    深入理解JQuery中的事件与动画

    基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述。 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover...

    JavaScript Event学习第九章 鼠标事件

    最后是微软的mouseenter和mouseleave事件。 浏览器的兼容性问题,可以在浏览器兼容性列表查看。例子 这里有一个例子。可以帮助理解下面的内容。 mousedown,mouseup,click和dblclick在这个链接上注册。可以再下面的...

    鼠标经过子元素触发mouseout,mouseover事件的解决方案

    我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画;当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发);当鼠标移出的时候,橙色方块消失。 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行...

    mouseover事件事例

    mouseover事件事例,可以让你对mouseover有一定的了解

Global site tag (gtag.js) - Google Analytics