jQuery事件委托Safari

jQuery事件委托Safari
什么是事件委托
事件委托是jQuery中事件绑定的一种方式,它绑定到目标元素,而不是公共事件绑定方法。相反,事件绑定到父元素并由事件气泡执行

常见事件绑定(jQuery)
$(元素)Click(函数(){)
做某事
})
事件委托(jQuery)
$(双亲)。
做某事
})
事件委托原则
事件委托将事件侦听器绑定到目标元素的父元素。当目标元素对事件作出响应时,它会起泡到绑定事件的父级,并决定事件的目标元素是否是传入元素,如果它是执行传入函数的。

事件委托的简单实现

点击

无功oparent = document.getelementbyid(oparent ),oclick = document.getelementbyid(oclick );
对象。原型。=功能(EV,FN,obj){
VaR sclass = object.prototype.tostring.call(obj);
如果(obj | | sclass.indexof(HTML)= = = 1){ / /是否代表事件
This.addEventListener(EV,功能(e){
VaR E = E | | window.event;
如果(e.target = = = = = =目标。型EV){
fn.call(e.target); / /来袭目标元素
}
},假);
其他{ }
This.addEventListener(EV,FN,假);
}
}
document.on(单击
没有兼容性处理,只是为了理解原理,你可以留下什么问题来指出。

事件委托有什么用
说这么多事情,委员会到底有什么用我认为事件委托的最大好处是动态生成的元素也保留了原始事件绑定。

当命中时,UL将添加一个新的Li,所有的新李都有绑定事件。
新李

使用绑定的公共事件实现
$(#灵魂)。找到(李),(单击
做某事
})
$(# addbtn ),(单击
$(#灵魂)。追加();
$(#灵魂)。找到(李),(单击
做某事
})
})
不要说第一个性能问题,实现这样的外观,这是合乎逻辑的。
使用事件委托实现
$(文档)。
做某事
})
$(# addbtn ),(单击
$(#灵魂)。追加();
})
此代码不简单,解决了重复绑定的问题。
今天的主题,事件委托sarfari
在一个项目中遇到的问题是,在移动端被委派给Safari的单击事件。

加载更多

$(文档)。
警报(OK)
})
看看上面的代码。这很简单。这没什么不对的。除了iOS的Safari,其他浏览器通常可以正常运行。一开始,我想如果有什么地方停止泡沫,但我们没有发现JQ的问题。这是不可能改变它。正常结合(不使用事件委托)是没有问题的。其他人认为这将是JQ的bug。如果是JQ的bug,那么以前的项目都会有类似的错误,所以寻找线路上的相关代码。

测试

$(文档)。
做某事
})
在android和iOS设备上测试,没有问题,代码几乎是一样的,但是你注意到标签是不同的。(HTML语义非常重要),所以p被转换为A,这个问题被完美地解决了。最后,谷歌走了。
当Safari用于将单击事件添加到IOS单击中的某个元素时,如果事件被委托给文档或主体,默认情况下不允许委托元素,如div、跨度等,此时单击事件将失败。
原因很清楚,在Safari中非可点击元素的单击事件不泡了文档和身体。
和解条款
1。将单击事件直接绑定到元素(不使用事件委托)
2。这需要绑定单击事件或是可点击的元素
三.委托的单击事件的非文字或身体的父元素
4。添加CSS样式光标:指向目标元素的指针(推荐这个,便于保存
以上是jQuery的Safari,这是经萧边介绍给你。希望能对你有所帮助。如果你有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部