我怎样才能在 parent 元素而不是一般 child 元素上触发 hammer.js 滑动事件?
How can I have a hammer.js swipe event fire on a parent element but not general child element?
我正在使用 hammer.js 2.0
我有一个容器,需要滑动事件。但是,该容器有一个旋转木马元素,其中包含自己的滑动通风口。我怎样才能让这个滑动事件在所有地方都触发 但 旋转木马?
var self = this,
hammerContainer = document.querySelector('section.content-wrapper'),
carousel = document.querySelector('.image-gallery-carousel'),
hammerOpts = {
threshold: 4,
velocity: .3
},
hammer = new Hammer(hammerContainer, hammerOpts);
Hammer.off(carousel, 'swipeleft swiperight', function () {
});
hammer.on('swipeleft', function (e) {
// do some other things
});
.off
方法似乎不适用于我的轮播。锤子事件还在“传播”? ¿冒泡?
它不需要在 上 轮播上触发,但它也可能在任何 children 上触发。
我发现工作的唯一方法是让 jQuery 参与进来。我不觉得自己是一个更好的人。
- 抢
event.target
- 使用 jQuery 的
.parents()
方法获取目标 parents 的所有给定 classname
- 使用
if
语句检查那些parents的长度,如果长度为0,则执行我的滑动
使用属性选择器检查单词 carousel 作为 class 名称的所有实例和变体,例如:[class*="carousel"]
var self = this,
hammerContainer = document.querySelector('section.content-wrapper'),
hammerOpts = {
threshold: 4,
velocity: .3
},
hammer = new Hammer(hammerContainer, hammerOpts);
hammer.on('swiperight', function (e) {
if (!$(e.target).parents('[class*="carousel"]').length) {
//do swipey things
}
});
我觉得事件传播应该是我能够做的事情。比如,调用 e.stopPropagation()
。
某人,任何人,请告诉我更好的方法。
我正在使用 hammer.js 2.0
我有一个容器,需要滑动事件。但是,该容器有一个旋转木马元素,其中包含自己的滑动通风口。我怎样才能让这个滑动事件在所有地方都触发 但 旋转木马?
var self = this,
hammerContainer = document.querySelector('section.content-wrapper'),
carousel = document.querySelector('.image-gallery-carousel'),
hammerOpts = {
threshold: 4,
velocity: .3
},
hammer = new Hammer(hammerContainer, hammerOpts);
Hammer.off(carousel, 'swipeleft swiperight', function () {
});
hammer.on('swipeleft', function (e) {
// do some other things
});
.off
方法似乎不适用于我的轮播。锤子事件还在“传播”? ¿冒泡?
它不需要在 上 轮播上触发,但它也可能在任何 children 上触发。
我发现工作的唯一方法是让 jQuery 参与进来。我不觉得自己是一个更好的人。
- 抢
event.target
- 使用 jQuery 的
.parents()
方法获取目标 parents 的所有给定 classname - 使用
if
语句检查那些parents的长度,如果长度为0,则执行我的滑动 使用属性选择器检查单词 carousel 作为 class 名称的所有实例和变体,例如:
[class*="carousel"]
var self = this, hammerContainer = document.querySelector('section.content-wrapper'), hammerOpts = { threshold: 4, velocity: .3 }, hammer = new Hammer(hammerContainer, hammerOpts); hammer.on('swiperight', function (e) { if (!$(e.target).parents('[class*="carousel"]').length) { //do swipey things } });
我觉得事件传播应该是我能够做的事情。比如,调用 e.stopPropagation()
。
某人,任何人,请告诉我更好的方法。