测试获取手指按下抬起的坐标的,发现了很多东西,毕竟之前没怎么接触过,比如:
event.touches[0].clientX(JS原生,适用于JQ,不适用于touchend)
event.changedTouches[0].clientX(JS原生,适用于JQ,适用于touchend)
e.originalEvent.touches[0].clientX(JQ封装,不适用于JS,不适用于touchend)
e.originalEvent.changedTouches[0].clientX(JQ封装,不适用于JS,适用于touchend)
这个结论可能有误,或者局面性,但是还是放在我的菜鸟tips里,欢迎补充或者纠正。之前听过e和event的区别是IE和FF的,不过一直用的都是chrome,但是e和event却不能互换,传参的那个e也不能省略,很是不能理解e和event的不同,求解答。下面使用js和jq测试的例子。
<script>
//javascript
var test1 = document.getElementsByClassName("test1")[0];
test1.addEventListener("touchstart",function (e){
console.log(event.touches[0].clientX + ":" + event.changedTouches[0].clientX);
//报错//console.log(e.originalEvent.touches[0].clientX + ":" + e.originalEvent.changedTouches[0].clientX);
});
//jquery
// $("#test1").on("touchstart",function (e){
// console.log(event.touches[0].clientX + ":" + event.changedTouches[0].clientX);
// console.log(e.originalEvent.touches[0].clientX + ":" + e.originalEvent.changedTouches[0].clientX);
// })
</script>
当你使用addEventListener
的时候,回调函数应该加上形参,不管是e
或者是event
,只要符合变量命名规则就可以了
就像
var button = document.getElementsById("buttonId")[0];
button.addEventListener("click",function (e){
console.log(e);
});
// button.addEventListener("click",function (event){
// console.log(event); //也是可行的
// });
$("#buttonId").on("click", function (e) {
console.log(e); // 已做过兼容处理
});
函数的参数e
(或者event
)会由浏览器帮我们传入
而这个参数e
对象的内容,如果是标准事件
(非自定义事件)的话,则由浏览器自身来决定,而当使用jquery的时候,实际上jquery已经帮我们把传入回调的数据做了兼容性的处理以保证在各个浏览器都可以保持一致行为
而你的疑问应该是window.event
和事件处理回调里的参数event
的区别吧?
$("#buttonId").on("click", function (e) {
console.log(e); // 已做过兼容处理
console.log(event); // window.event
});
button.addEventListener("click",function (event){
console.log(event === window.event); //chrome下输出为true
});
在chrome下这个window.event
实际和addEventListener(eventType, function(event){})
中的event
是一样的.旧版本的ie也有window.event
,但是旧版本ie并不支持addEventListener
,而firefox并没有这个值,基本上也不建议使用这个值就是了
我理解题主的疑问是在 代码中event 和 e 到底该用什么? 或者可以说在不同的浏览器下怎么获取事件对象。 通常见到的方法是
var evt = window.event || e;
IEChrome中事件对象是作为全局对象( window.event )存在的,Firefox中则是做为句柄( handler )的第一个参数传入内的。所以上述情况也可以是这样一行代码
var evt = window.event || arguments[0];