Question

iOS / Android设备上的锤子js存在很大问题：事件和删除的HTML元素似乎存在问题。假设我们有一个容器，我们使用带有触摸和平底锅处理程序的hammer.ja。在里面我们有一个HTML元素，我们开始拖动。当在处理程序内部的某些逻辑中删除元素时，即使手指仍在设备上并且正在移动，也不会再触发任何事件。桌面浏览器不会显示这种烦人的行为。

这是一个小小的jsFiddle演示：http://jsfiddle.net/npowuf15/20/ ...

HTML：

<div id="wrapper">
    <div id="steady"></div>
    <div id="willBeDeleted"></div>    
</div>

CSS：

#wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
    margin-top: 100px;
}

#steady {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    background: green;
    -webkit-user-select: none;
    -webkit-touch-callout: none; 
    -webkit-user-drag: none; 
}

#willBeDeleted {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: yellow;
    -webkit-user-select: none;
    -webkit-touch-callout: none; 
    -webkit-user-drag: none; 
}

JS：

Hammer(document.getElementById('wrapper'))
.on('hammer.input', function(evt) {
    if (evt.isFirst) {
        console.log('touch', evt.target.id);
        if (evt.target.id === 'willBeDeleted') {
            window.setTimeout(function() {
                $(evt.target).remove()
            }, 500);
        }        
    }
})
.on('panstart', function(evt) {
    evt.preventDefault();
    console.log('panstart', evt.target.id);
})
.on('panmove', function(evt) {
    evt.preventDefault();
    console.log('panmove', evt.target.id);    
})
.on('panend', function(evt) {
    console.log('panend', evt.target.id);
});

当您在iOS上调试此内容时，您可以看到，当您触摸ID为“willBeDeleted”的框后尝试移动手指时，事件如何停止 - 因为它将在半秒后被删除。

这真的是期待的吗？有什么建议吗？

iOS / Android＆amp; hammer.js：触摸时事件停止HTML元素从DOM中删除

0 个答案: