- 浏览: 414517 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
305954240:
好,好,好文。。。
facebook怎么赚钱?facebook盈利模式解析 -
天外鸭:
你好,我想问一些,那个runsall是哪个版本的命令,我在9. ...
db2常用命令大全 -
tterry:
这个叫热部署的话真是羞煞我等
idea -
Torero:
请求的不是Action的Execute方法, 而是其他方法呢? ...
struts2拦截器实现权限控制 -
fortaotao:
咨询一个问题,<security-constraint& ...
备忘:启用 Tomcat 下的 HTTPS
jquery事件中的relatedTarget
2009-06-22 01:40
看jq的图片预加载的例子,看到里面有这样一行代码:
$(e.relatedTarget).attr("id")!="newBigPop"
e是jq触发事件后回调的参数
那么这个e到底有什么东东呢? 我在页面的事件中加了debugger;
然后刷新页面,自动触发vs 然后断点进行调试,发现如下特征:
e
{...}
altKey: false
attrChange: undefined
attrName: undefined
bubbles: undefined
button: 0
cancelable: undefined
charCode: undefined
clientX: 685
clientY: 181
ctrlKey: false
currentTarget: undefined
data: undefined
detail: undefined
eventPhase: undefined
fromElement: {...}
jQuery1245604506734: true
keyCode: 0
metaKey: undefined
newValue: undefined
originalEvent: {...}
originalTarget: undefined
pageX: 685
pageY: 181
prevValue: undefined
relatedNode: undefined
relatedTarget: {...}
screenX: 687
screenY: 311
shiftKey: false
srcElement: {...}
target: {...}
timeStamp: 1245604507250
toElement: {...}
type: "mouseenter"
view: undefined
wheelDelta: 0
which: undefined
那还是有些不理解,怎么办? 用GG去搜一下jq relatedTarget,发现早已经有人把jq的源码中的event进行了讲解
related---相关的、关联的,relatedTarget就是触发这个事件的事件源了 类似ie系列中的scrElement或是ff中的target。
顺便提一下,IE与FF下得到event对象方法为: window.event || arguments.callee.caller.arguments[0];
这是用原生的js方法得到的。那JQ却转了一道弯
以下为GG得到的内容,加了点自己的理解:
Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,但是足够使用。
//对事件进行包裹。
fix : function(event) {
if (event[expando] == true) return event;//表明事件已经包裹过
//保存原始event,同时clone一个。
var originalEvent = event; ① original译为:起初的,原来的。
event = { originalEvent : originalEvent};
for (var i = this.props.length, prop;i;) { ----------------这个地方在最后我会提到
prop = this.props[--i];
event[prop] = originalEvent[prop];
}
event[expando] = true;
//加上preventDefault and stopPropagation,在clone不会运行
event.preventDefault = function() { ② -阻止浏览器的默认行为,如表单提交事件
// 在原始事件上运行
if (originalEvent.preventDefault)
originalEvent.preventDefault();
originalEvent.returnValue = false;
};
event.stopPropagation = function() {
// 在原始事件上运行
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
originalEvent.cancelBubble = true; //---------------取消事件冒泡。
};
// 修正 timeStamp ----stamp译为时间戳,这里可以理解为事件触发时的时间
event.timeStamp = event.timeStamp || now();
// 修正target
if (!event.target) ③
event.target = event.srcElement || document;
if (event.target.nodeType == 3)//文本节点是父节点。
event.target = event.target.parentNode;
// relatedTarget
if (!event.relatedTarget && event.fromElement) ④
event.relatedTarget = event.fromElement == event.target
? event.toElement : event.fromElement;
// Calculate pageX/Y if missing and clientX/Y available
if (event.pageX == null && event.clientX != null) { ⑥
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
event.pageY = event.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
// Add which for key events
if (!event.which && ((event.charCode || event.charCode === 0) ⑦
? event.charCode : event.keyCode))
event.which = event.charCode || event.keyCode;
// Add metaKey to non-Mac browsers
if (!event.metaKey && event.ctrlKey) ⑧
event.metaKey = event.ctrlKey;
// Add which for click: 1 == left; 2 == middle; 3 == right
// Note: button is not normalized, so don't use it
if (!event.which && event.button) ⑨
event.which = (event.button & 1 ? 1 : (event.button & 2
? 3 : (event.button & 4 ? 2 : 0)));
return event;
},
上面的代码①处保留原始事件的引用,同时clone原始事件。在这个clone的事件上进行包裹。②处在原始事件上运行preventDefault 和 stopPropagation两个方法达到是否阻止默认的事件动作发生和是否停止冒泡事件事件向上传递。
③处是修正target个,IE中采用srcElement,同时对于文本节点事件,应该把target传到其父节点。
④处relatedTarget只是对于mouseout、mouseover有用。在IE中分成了to和from两个Target变量,在mozilla中没有分开。为了保证兼容,采用relatedTarget统一起来。
⑥处是进行event的坐标位置。这个是相对于page。如果页面可以scroll,则要在其client上加上scroll。在IE中还应该减去默认的2px的body的边框。
⑦处是把键盘事件的按键统一到event.which的属性上。Ext中的实现ev.charCode || ev.keyCode || 0; ⑨则是把鼠标事件的按键统一把event.which上。charCode、ev.keyCode一个是字符的按键,一个不是字符的按键。⑨处采用&的方式来进行兼容性的处理。 Ext 通过下面三行解决兼容问题。
var btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
看了上面的应该理解一些了,有兴趣的可以直接再深入到他的源码中去。
如果你要取消事件冒泡,可以这样用:
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
e.stopPropagation();
}) 还有一种更简单的方法:
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
return false;
})这样也可以的。
仔细看,可以发现里面有这样一个属性:originalEvent
jq中文文档译者:http://shawphy.com/2008/07/the-missing-manual-in-jquery-1.html
这里有提到他的使用:
获取鼠标的相对坐标:
$("#menuWrap").mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
});
下面为一个简单的菜单JS代码:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
jQuery(function($) {
$("#menuWrap").mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
var yy=e.originalEvent.y||e.originalEvent.layerY||0;
if (xx<50) xx=50
if ( xx > 450) xx=450
$("#menu").stop(true).animate({"marginLeft":parseInt(0-(xx-50)/399*300)},600,"easeOutBack");
});
});
jQuery.easing.easeOutBack=function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
//-->
</script>
前面我作了一个记号:props,它里面又有些什么东东呢?
props : "altKey attrChange attrName bubbles button cancelable charCode clientX "
+ "clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode "
+ "metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX "
+ "screenY shiftKey srcElement target timeStamp toElement type view wheelDelta which"
.split(" "),
到这里,我想应该都明白了我最开始贴出来的那段神奇的代码吧。
想深入了解的可以点击这里继续查看:http://jljlpch.iteye.com/blog/230080
2009-06-22 01:40
看jq的图片预加载的例子,看到里面有这样一行代码:
$(e.relatedTarget).attr("id")!="newBigPop"
e是jq触发事件后回调的参数
那么这个e到底有什么东东呢? 我在页面的事件中加了debugger;
然后刷新页面,自动触发vs 然后断点进行调试,发现如下特征:
e
{...}
altKey: false
attrChange: undefined
attrName: undefined
bubbles: undefined
button: 0
cancelable: undefined
charCode: undefined
clientX: 685
clientY: 181
ctrlKey: false
currentTarget: undefined
data: undefined
detail: undefined
eventPhase: undefined
fromElement: {...}
jQuery1245604506734: true
keyCode: 0
metaKey: undefined
newValue: undefined
originalEvent: {...}
originalTarget: undefined
pageX: 685
pageY: 181
prevValue: undefined
relatedNode: undefined
relatedTarget: {...}
screenX: 687
screenY: 311
shiftKey: false
srcElement: {...}
target: {...}
timeStamp: 1245604507250
toElement: {...}
type: "mouseenter"
view: undefined
wheelDelta: 0
which: undefined
那还是有些不理解,怎么办? 用GG去搜一下jq relatedTarget,发现早已经有人把jq的源码中的event进行了讲解
related---相关的、关联的,relatedTarget就是触发这个事件的事件源了 类似ie系列中的scrElement或是ff中的target。
顺便提一下,IE与FF下得到event对象方法为: window.event || arguments.callee.caller.arguments[0];
这是用原生的js方法得到的。那JQ却转了一道弯
以下为GG得到的内容,加了点自己的理解:
Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,但是足够使用。
//对事件进行包裹。
fix : function(event) {
if (event[expando] == true) return event;//表明事件已经包裹过
//保存原始event,同时clone一个。
var originalEvent = event; ① original译为:起初的,原来的。
event = { originalEvent : originalEvent};
for (var i = this.props.length, prop;i;) { ----------------这个地方在最后我会提到
prop = this.props[--i];
event[prop] = originalEvent[prop];
}
event[expando] = true;
//加上preventDefault and stopPropagation,在clone不会运行
event.preventDefault = function() { ② -阻止浏览器的默认行为,如表单提交事件
// 在原始事件上运行
if (originalEvent.preventDefault)
originalEvent.preventDefault();
originalEvent.returnValue = false;
};
event.stopPropagation = function() {
// 在原始事件上运行
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
originalEvent.cancelBubble = true; //---------------取消事件冒泡。
};
// 修正 timeStamp ----stamp译为时间戳,这里可以理解为事件触发时的时间
event.timeStamp = event.timeStamp || now();
// 修正target
if (!event.target) ③
event.target = event.srcElement || document;
if (event.target.nodeType == 3)//文本节点是父节点。
event.target = event.target.parentNode;
// relatedTarget
if (!event.relatedTarget && event.fromElement) ④
event.relatedTarget = event.fromElement == event.target
? event.toElement : event.fromElement;
// Calculate pageX/Y if missing and clientX/Y available
if (event.pageX == null && event.clientX != null) { ⑥
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
event.pageY = event.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
// Add which for key events
if (!event.which && ((event.charCode || event.charCode === 0) ⑦
? event.charCode : event.keyCode))
event.which = event.charCode || event.keyCode;
// Add metaKey to non-Mac browsers
if (!event.metaKey && event.ctrlKey) ⑧
event.metaKey = event.ctrlKey;
// Add which for click: 1 == left; 2 == middle; 3 == right
// Note: button is not normalized, so don't use it
if (!event.which && event.button) ⑨
event.which = (event.button & 1 ? 1 : (event.button & 2
? 3 : (event.button & 4 ? 2 : 0)));
return event;
},
上面的代码①处保留原始事件的引用,同时clone原始事件。在这个clone的事件上进行包裹。②处在原始事件上运行preventDefault 和 stopPropagation两个方法达到是否阻止默认的事件动作发生和是否停止冒泡事件事件向上传递。
③处是修正target个,IE中采用srcElement,同时对于文本节点事件,应该把target传到其父节点。
④处relatedTarget只是对于mouseout、mouseover有用。在IE中分成了to和from两个Target变量,在mozilla中没有分开。为了保证兼容,采用relatedTarget统一起来。
⑥处是进行event的坐标位置。这个是相对于page。如果页面可以scroll,则要在其client上加上scroll。在IE中还应该减去默认的2px的body的边框。
⑦处是把键盘事件的按键统一到event.which的属性上。Ext中的实现ev.charCode || ev.keyCode || 0; ⑨则是把鼠标事件的按键统一把event.which上。charCode、ev.keyCode一个是字符的按键,一个不是字符的按键。⑨处采用&的方式来进行兼容性的处理。 Ext 通过下面三行解决兼容问题。
var btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
看了上面的应该理解一些了,有兴趣的可以直接再深入到他的源码中去。
如果你要取消事件冒泡,可以这样用:
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
e.stopPropagation();
}) 还有一种更简单的方法:
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
return false;
})这样也可以的。
仔细看,可以发现里面有这样一个属性:originalEvent
jq中文文档译者:http://shawphy.com/2008/07/the-missing-manual-in-jquery-1.html
这里有提到他的使用:
获取鼠标的相对坐标:
$("#menuWrap").mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
});
下面为一个简单的菜单JS代码:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
jQuery(function($) {
$("#menuWrap").mousemove(function(e) {
var xx=e.originalEvent.x||e.originalEvent.layerX||0;
var yy=e.originalEvent.y||e.originalEvent.layerY||0;
if (xx<50) xx=50
if ( xx > 450) xx=450
$("#menu").stop(true).animate({"marginLeft":parseInt(0-(xx-50)/399*300)},600,"easeOutBack");
});
});
jQuery.easing.easeOutBack=function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
//-->
</script>
前面我作了一个记号:props,它里面又有些什么东东呢?
props : "altKey attrChange attrName bubbles button cancelable charCode clientX "
+ "clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode "
+ "metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX "
+ "screenY shiftKey srcElement target timeStamp toElement type view wheelDelta which"
.split(" "),
到这里,我想应该都明白了我最开始贴出来的那段神奇的代码吧。
想深入了解的可以点击这里继续查看:http://jljlpch.iteye.com/blog/230080
发表评论
-
浏览器的判断
2011-07-11 11:09 702http://www.jb51.net/article/267 ... -
50 个jquery 好的用法
2011-07-10 15:16 727http://www.gbin1.com/technology ... -
ext js console
2011-03-13 17:24 1055var o = Ext.util.Observable.pro ... -
extjs插件开发
2011-03-13 16:16 712extjs插件开发 http://blog.csdn.net/ ... -
修复Ext 2.X的DateField在Firefox3里的BUG
2011-03-06 17:48 803修复Ext 2.X的DateField在Firefox3里的B ... -
JS使用正则和charCodeAt()方法区分中英文字符的2种方法
2011-02-23 17:28 1109JS使用正则和charCodeAt()方法区分中英文字符的2种 ... -
Ext 修改grid行或者列的背景颜色和字体颜色
2011-02-15 15:46 30362010-11-18 Ext 修改grid行或者列的背景颜色和 ... -
js 的 delete
2011-01-19 10:30 762js 的 delete 虽然是一个 ... -
2009-11-25 Ext.Panel 集成OpenLayers.Map
2011-01-18 19:41 10452009-11-25 Ext.Panel 集成OpenLaye ... -
js及相关框架
2011-01-12 11:11 644js及相关框架 http://www.myext.cn/gua ... -
深入剖析ExtJS 2.2实现及应用连载(11): 左边导航菜单
2011-01-10 14:19 1057http://www.cnblogs.com/jxnuprk/ ... -
Ext学习笔记一:Ext SDK包的结构说明
2011-01-10 10:44 1203Ext学习笔记一:Ext SDK包的结构说明 ExtJS是一个 ... -
« scrollLeft、scrollWidth、clientWidth、offsetWidth详解
2011-01-07 10:43 772[url] http://www.51jquery.com/2 ... -
jQuery 理解
2011-01-06 00:25 918jQuery 理解 jquery this的 ... -
几种JavaScript定义类和对象的方法
2011-01-05 20:07 781几种JavaScript定义类和对象的方法 http://w ...
相关推荐
事件处理是JavaScript编程中不可或缺的一部分,jQuery对此进行了封装,提供了更简单、更一致的方式来处理页面事件。本篇文章将对jQuery中的事件对象进行总结,涵盖了事件对象的一些常用属性和方法。 首先,事件对象...
jQuery事件对象是jQuery中用于处理网页事件的重要组成部分。事件对象通常在事件处理函数中作为参数存在,它包含了与特定事件相关的信息,如事件类型、事件触发者、鼠标坐标、键盘按键等。在不同浏览器中,这些事件...
在上述过程中,通过一个内部变量`expando`(即属性名`jQuery.expando`)来标记该事件对象是否被jQuery处理过,避免重复包装。 在包装事件对象的同时,jQuery还对浏览器提供的原生事件处理函数进行了扩展,以解决...
通常,mouseenter和mouseleave事件会一起使用,而在jQuery中可以使用hover()方法来简化绑定这两个事件的过程。 示例代码: ```javascript $('p').mouseenter(function(){ alert('mouseenter function is running!'...
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...
`event.relatedTarget`在鼠标事件中用于指出元素离开或进入的目标元素,这对于处理鼠标移入和移出事件尤其有用。 `event.currentTarget`是在事件冒泡阶段当前正在处理事件的DOM元素,它通常等于`this`,在事件处理...
在这种情况下,可以使用`event`对象中的`relatedTarget`属性来判断事件的目标节点和相关节点,从而手动控制事件触发逻辑。`relatedTarget`属性可以告诉我们当前事件是从哪个节点移过来的,或者是鼠标正在移向哪个...
5. `event.relatedTarget`属性:这个属性在标准DOM中用于获取`mouseover`和`mouseout`事件发生时鼠标所在的元素。jQuery通过封装,解决了不同浏览器之间的差异,使得这个属性在所有浏览器中都能得到一致的行为和结果...
`jQuery` 是一个广泛使用的 JavaScript 库,简化了DOM操作、事件处理和动画效果,因此常用于实现交互式下拉菜单。本文将详细介绍如何使用 jQuery 创建一个简单的二级下拉菜单,同时支持边框阴影效果。 首先,确保在...
jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理和Ajax交互,使得前端开发更加高效。Bootstrap则是一个流行的HTML、CSS和JS框架,提供了大量的预定义样式和组件,用于快速构建响应式和移动优先的网站。 ...
jQuery是一个轻量级的JavaScript库,提供了丰富的DOM操作、事件处理和动画效果,而Bootstrap是流行的前端开发框架,内置了多种UI组件,包括旋转木马。下面将详细介绍如何结合两者来创建旋转木马特效。 首先,确保在...
首先,我们需要理解jQuery的选择器和事件处理。在这个实例中,`$(".cat-cont")`是用来选取二级菜单的div元素,而`$(".J_Cat")`则是选取一级菜单的li元素。`mouseenter`和`mouseleave`是两个关键的事件,分别在鼠标...
开发者通常会借助库如jQuery或Modernizr来简化跨浏览器兼容性问题的处理,它们提供了一致的API来操作DOM和处理事件,从而避免直接处理这些差异。此外,遵循W3C标准和使用最新的HTML和JavaScript版本也有助于减少兼容...
这段代码采用jQuery库,使用 $(".target-menu") 来选择页面中所有类名为“target-menu”的元素,并在它们上面绑定一个mouseout事件处理函数。 在代码中,首先使用`window.event || e`来兼容不同浏览器的事件对象,...
JavaScript 中,我们可以使用 `addEventListener` 方法来绑定事件处理器。对于下拉菜单,我们主要关注 `mouseover` 和 `mouseout` 事件。当鼠标进入主菜单项时,显示子菜单;当鼠标离开主菜单项或子菜单时,隐藏子...
下面是通过jQuery实现的一个解决示例,该示例中使用了`.hover()`方法来处理鼠标悬停事件,并通过判断事件对象的`relatedTarget`属性来确定用户鼠标是否移动到了下拉菜单中的option元素上。如果不是,则下拉菜单会...
7. 数据属性:Bootstrap模态框支持使用数据属性来传递参数,如`data-whatever`,可以在JavaScript事件处理程序中获取这些值,实现动态内容。 8. 自定义内容:通过JavaScript或jQuery,可以动态地改变模态框的内容,...
在JavaScript编程中,确保代码在不同的浏览器环境下都能正常工作是一项重要的任务。...在实际开发中,还可以使用像jQuery这样的库,它们已经处理了许多跨浏览器的兼容性问题,让开发者更加专注于业务逻辑。
如果`mouseout`事件的`relatedTarget`为`null`,表示鼠标已经离开文档,`_END`方法会被调用,关闭放大效果。 总之,Cloudgamer的ImageZoom图片放大效果提供了一套完整且灵活的解决方案,兼顾了性能和用户体验,是...