Question

我正在尝试将preventDefault应用于iBooks中的div，以创建一个区域，其中没有任何用于翻页的触摸/拖动事件。到目前为止，我只是试图阻止触摸事件，但它无法正常工作。我在这里的实施可能完全错了：

var area = document.getElementById('area');
function touchStart(event) {
    event.preventDefault();
}
function touchMove(event) {
    event.preventDefault();
}
function touchEnd(event) {
    event.preventDefault();
}
function touchCancel(event) {
    event.preventDefault();
}

area.addEventListener("touchstart", touchStart, false);
area.addEventListener("touchmove", touchMove, false);
area.addEventListener("touchend", touchEnd, false);
area.addEventListener("touchcancel", touchCancel, false);

任何关于为什么这不会阻止触摸事件的提示都会感激不尽。

Answer 1

我遇到了同样的问题。不知道为什么addEventListener对我不起作用，bind却没有。

var events = 'click touchmove touchstart touchend touchcancel';
$('#area').bind(events, function(e) {
    e.preventDefault();
}

Answer 2

你很亲密。为了将事件传递给函数，您实际上必须使用匿名函数。

我认为你也不应该担心创建多个函数而只是在匿名函数中调用一行。

var area = document.getElementById('area');

area.addEventListener("touchstart", function(event) {event.preventDefault()}, false);
area.addEventListener("touchmove", function(event) {event.preventDefault()}, false);
area.addEventListener("touchend", function(event) {event.preventDefault()}, false);
area.addEventListener("touchcancel", function(event) {event.preventDefault()}, false);

如果您仍然想要让事件监听器调用您的函数，那么它将看起来像这样：

var area = document.getElementById('area');

function myTouchStart(myEvent) {
    myEvent.preventDefault();
}

area.addEventListener("touchstart", function(event) {myTouchStart(event)}, false);

这个想法是事件监听器有一个匿名函数，而不是调用你的函数。使用匿名函数，您可以将事件对象声明为要传递给匿名函数并传递给您自己的函数。

ibooks中的event.preventDefault（）：任何人都可以解释为什么这不起作用？

2 个答案: