[英]Add event listener to child whose parent has event disabled
Weird one here. 这里很奇怪 Earlier I was messing around with preventing the default
touchmove
behavior in an iOS webapp I'm building. 早些时候,我在防止正在构建的iOS Webapp中使用默认的
touchmove
行为。 It's easy enough to add the event listener and prevent propogation, but I need to add the default behavior back to one of it's children. 添加事件侦听器并防止传播很容易,但是我需要将默认行为添加回其子级之一。 As I understand it though, because the parent is disabled the child will never register the event.
据我了解,由于父母被禁用,孩子将永远不会注册该事件。
So I need a solution. 所以我需要一个解决方案。
Essentially, there's a lot of swiping going on, so the default body-scrolling behavior needs to be knocked out. 本质上,要进行大量刷卡操作,因此需要消除默认的身体滚动行为。 The page sliding around while swiping is infuriating.
滑动时页面四处滑动,实在令人发指。 Naturally, I have to add the event listener to the outside container.
自然,我必须将事件侦听器添加到外部容器中。 Can't avoid it.
无法避免。
How can I add back the default, browser controlled behavior to one of the children? 如何将默认的,受浏览器控制的行为添加回其中一个子行为? I don't want to fake it with my own physics and all.
我不想用我自己的物理学和所有东西来伪造它。
Thanks for your help. 谢谢你的帮助。
HTML: HTML:
<div id="mainPanel"> <!-- add event listener and preventDefault(); -->
<div id="nonScrollingPanel></div>
<div id="scrollingPanel></div> <!-- add event listener and re-enable default -->
</div>
JavaScript: JavaScript:
$bod.on('touchmove', '#mainPanel', function(event){
event.preventDefault();
});
$('#mainPanel').on('touchmove', '#scrollingPanel', function(){
return true;
});
Simply put, the simplest way is to check before the preventDefault()
if it's not the child. 简而言之,最简单的方法是在
preventDefault()
之前检查它是否不是孩子。
An example in plain JS: 普通JS中的示例:
HTML: HTML:
<div id="parent">
parent
<div id="child">
child
</div>
</div>
JS: JS:
var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
// Gets closest div
var div = function closest(el) {
if (el.tagName === 'DIV') {
return el;
}
else {
return closest(el.parentNode);
}
}(e.target);
if (div.id !== 'child') {
e.preventDefault();
}
});
Jsfiddle example: http://jsfiddle.net/Ralt/yxxmx/ Jsfiddle示例: http : //jsfiddle.net/Ralt/yxxmx/
Following your example, it'd be something like: 按照您的示例,它将类似于:
$bod.on('touchmove', '#mainPanel', function(event){
if ($(event.target).closest('div')[0].id !== 'scrollingPanel') {
event.preventDefault();
}
});
The reason why this doesn't work as you expect, is that jQuery runs all event handlers, unless you stop propagation in one of them. 之所以无法按预期工作,是因为jQuery运行所有事件处理程序,除非您停止在其中一个事件处理程序中传播。 In your example, both event handlers will run.
在您的示例中,两个事件处理程序都将运行。
Here's one solution, which I don't like because you might actually want the event to propagate for some other purpose. 这是一个我不喜欢的解决方案,因为您可能实际上希望事件出于其他目的传播。
$('#main-panel').on('touchmove', function(e) {
e.preventDefault();
});
$('#scrolling-panel').on('touchmove', function(e) {
e.stopPropagation();
});
So here's what I would do, unless iOS has some special meta tag to disable page sliding: 所以这就是我要做的,除非iOS有一些特殊的meta标签来禁用页面滑动:
$('#main-panel').on('touchmove', function(e) {
if (!$('#scrolling-panel')[0].contains(e.target)) {
e.preventDefault();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.