示例引用：
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中，鼠标事件主要分为两类：鼠标动作事件和鼠标按钮事件。动作事件通常与鼠标移动有关，而按钮事件则与鼠标的点击操作相关。以下是一些基本的鼠标事件： 1. `mousemove`：当鼠标在元素上移动时触发。...
针对标题“JS中mouseover和mouseout多次触发问题如何解决”，主要内容探讨的是在JavaScript中使用jQuery库时，处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时，这些...
`mouseover`, `mouseout`, `mouseenter`, 和 `mouseleave` 是四个常见的鼠标事件，它们都与鼠标的移动有关，但触发条件有所不同。理解这些事件的区别对于编写无闪烁、响应良好的用户界面至关重要。 1. `mouseover` ...
总结来说，为非IE浏览器添加`mouseenter`和`mouseleave`事件主要涉及监听`mouseover`和`mouseout`事件，然后通过JavaScript模拟这些事件的行为。这样的实现有助于确保在所有浏览器中提供一致的用户体验，无论用户...
在JavaScript中，mouseover和mouseout事件是常用的事件，它们分别在鼠标指针进入和离开指定元素时触发。在事件处理中，区分鼠标指针是从子元素移入还是从父元素移出对于正确地触发相应的事件非常关键。本文详细探讨...
### jQuery中的鼠标事件详解 #### 一、引言 在前端开发中，处理用户的交互行为是必不可少的一部分。jQuery作为一款流行的JavaScript库，极大地简化了这些交互的处理方式。本文将重点介绍jQuery中与鼠标相关的事件...
1. **鼠标事件**：在JavaScript中，鼠标事件是用户与网页交互时触发的一系列事件。常见的鼠标事件有： - `click`：当用户点击鼠标按钮时触发。 - `dblclick`：当用户快速连续点击两次鼠标时触发。 - `mousedown`...
在JavaScript中，鼠标事件是这些交互的核心部分。 2. 鼠标事件类型： - `click`：单击鼠标按钮。 - `dblclick`：双击鼠标按钮。 - `mousedown`：按下鼠标按钮。 - `mouseup`：释放鼠标按钮。 - `mousemove`：...
这两个事件与原生JavaScript中的`mouseover`和`mouseout`有所不同，它们不会因为元素内部子元素的鼠标移动而触发。`mouseenter` 在鼠标进入元素边界时触发，而 `mouseleave` 在鼠标离开元素边界时触发。这对于处理...
在Vue.js中，开发者经常利用`v-for`指令来遍历数据并生成多个元素，同时结合事件监听器如`@mouseenter`和`@mouseleave`来实现交互效果。然而，在循环中使用这些事件处理函数可能会遇到一些问题，比如闪烁现象。本文...
**JQ 鼠标事件详解** 在前端开发中，jQuery（简称JQ）库以其简洁易用的API，使得JavaScript编程变得更加简单。鼠标事件是用户与网页交互时常见的触发事件，jQuery对这些事件提供了丰富的支持。本篇将详细介绍jQuery...
在JavaScript和jQuery中，处理鼠标事件时，经常会出现因元素嵌套导致的事件冒泡问题。标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细...
鼠标事件： 鼠标进入事件:mouseenter,mouseover 鼠标离开时触发:mouseout,mouseleave 鼠标移动事件:mousemove 鼠标按下事件:mousedown 鼠标弹起事件:mouseup 鼠标双击事件:dblclick 鼠标滚轮事件:...
在JavaScript和jQuery中，`mouseover` 和 `mouseout` 事件是常见的用于响应鼠标进入和离开元素的事件。然而，它们在处理嵌套元素时可能会引发一些问题，导致事件被不期望地多次触发。这是因为当鼠标从一个子元素移动...
3. **JavaScript事件监听**：使用JavaScript的`addEventListener`方法监听一级菜单项的`mouseover`和`mouseout`事件。当鼠标进入一级菜单项时，显示二级菜单；当鼠标离开时，隐藏二级菜单。 4. **动画效果**：在...
当鼠标移动到某个元素上时，通过JavaScript的mouseover或mouseenter事件触发内容的切换；而离开时，利用mouseout或mouseleave事件恢复原状。对于更复杂的动画效果，CSS3的transition和animation属性可以实现平滑的...
以下是对JavaScript焦点事件、鼠标事件和滚轮事件使用的深入解析。 焦点事件主要涉及到页面元素获得或失去焦点的交互，这些事件允许开发者通过程序对元素的焦点状态进行控制或响应。焦点事件主要包括以下几种： - ...
在众多事件处理中，hover、mouseover和mouseout是常见的鼠标事件，它们用于检测和响应用户的鼠标动作。但很多开发者对这三个事件之间的区别和使用场景存在混淆，下面就让我们深入分析这三个事件的区别及正确的使用...