Завершение события касания с preventDefault
У меня было много:
$('#element').on('tap', function(){
// some code ..
})
Я дважды искал много вопросов о проблеме с событием tap
, и я решил проблему с помощью e.preventDefault()
, теперь у меня много:
$('#element').on('tap', function(e){
e.preventDefault();
// some code ..
})
Хорошо, но, как я уже сказал, у меня есть много таких вызовов, и мне не нравится писать каждый раз e.preventDefault()
, затем я набрал $.fn.tap
на консоли Chrome и показал мне:
function (a){return a?this.bind(c,a):this.trigger(c)}
Я попытался переписать его следующим образом:
$.fn.tap = function (a) {
a.preventDefault();
return a?this.bind(c,a):this.trigger(c)
}
Но это не сработало, как в предыдущем e.preventDefault()
.
Я не вижу ничего очевидного, и у меня нет идей для этого.
Любая помощь или идея оцениваются. Спасибо заранее.
Ответы
Ответ 1
Одна из интересных функций jQuery (я обычно не использую "jQuery" и "cool" в одном предложении) заключается в том, что он позволяет вам указать настраиваемое поведение для событий, используя объект $.event.special
.
очень мало документации по этому вопросу, так что пример немного будет в порядке.
Рабочая скрипка с использованием события click
(как это было удобнее для меня писать на моем ноутбуке) можно найти здесь
Переведенный на ваш запрос, чтобы все события tap
имели e.preventDefault()
, вызываемые перед фактическим обработчиком, выглядели бы так:
$.event.special.tap.add = function(options) {
var handler = options.handler;
options.handler = function(e) {
e.preventDefault();
return handler.apply(this, arguments);
}
}
Что делает этот код (должен делать, поскольку я на самом деле не тестировал версию tap
выше), сообщает jQuery, что вы хотите специальное лечение для события tab
, в частности, вы хотите предоставить "упаковку" обработчик ", который делает не более чем вызов e.preventDefault()
перед вызовом предоставленного обработчика событий.
UPDATE: не удалось перезаписать настройки по умолчанию tap
, для будущих посетителей
ПРИМЕЧАНИЕ. Прежде чем предпринимать какие-либо попытки изменить поведение вещей по умолчанию, вы должны спросить себя, почему настройки по умолчанию не работают для вас. В основном потому, что изменение поведения по умолчанию (= ожидаемое) нарушит ваше будущее (или, что еще хуже, другое лицо), при сохранении кода и добавлении функций.
Для создания поддерживаемого (и прогнозируемого) потока в вашем коде предлагаемое решение для создания специальной функции случая ($.fn.tap
) на самом деле является очень жизнеспособным решением, так как оно не мешает по умолчанию (= ожидается ) поведение вещей.
Из приведенных ссылок вы также можете создать свой собственный тип события (например, tapOnly
) и сделать его более очевидным, если есть какая-то специальная работа. Опять же, оба этих решения потребуют от вас изменить привязки событий, которые вы пытаетесь предотвратить.
Ответ 2
Вот как вы можете создать свой $.fn.tap
: -
$.fn.tap = function(f) {
$(this).on('tap', function(e) {
e.preventDefault();
f();
});
return this;
};
//usage
$('.selector').tap(function() {
alert('foo bar')
})
@Washington Guedes - перезаписать событие-ответ по умолчанию, чтобы всегда использовать e.preventDefault() вместо изменения от $(element).on('tap', function() {}) to $(Элемент).TAP(функция() {})
Вы можете добавить событие делегата в body
для tap
, не указав цель. Затем он будет запускаться для всех событий tap
на теле, которые затем вы можете проверить, имеет ли цель свое собственное событие tap
, поэтому вы можете e.preventDefault();
.
ПРИМЕЧАНИЕ. Это не будет работать для делегированных событий tap
, как показано.
// global tap handler
$('body').on('tap', function(e) {
if ($._data(e.target, "events").tap)
e.preventDefault();
});
// tap event
$('a.tap').on('tap', function(e) {
$(this).css('color', 'red');
});
// delegated tap event
$('body').on('tap', 'a.delegate', function(e) {
$(this).css('color', 'green');
});
a {
display: block;
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<a class="tap" href="www.google.co.uk">tap event, prevented.</a>
<a class="delegate" href="www.google.co.uk">delegate tap event, not prevented.</a>
<a href="www.google.co.uk">no tap event, not prevented</a>
Ответ 3
Я знал, что это плохая идея, но я только что проверил это в Chrome
$('*').on('tap',function(e){
e.preventDefault();
});
$('#element').on('tap', function(){
// some code ..
});
и если вам это не нужно для всех элементов:
$('*').not('#aCertainElement').on('tap',function(e){
e.preventDefault();
});
Ответ 4
У меня была аналогичная проблема, в которой e.preventDefault()
работал бы в некоторых случаях, но не на других. Он не обнаружил ошибок, и использование try-catch
не отображало catch alert
. Добавление e.stopImmediatePropagation()
выполнило трюк, если оно помогает кому-либо