Я хочу отобразить изображение под мышью (палец для имитации сенсорного экрана), когда происходит событие mousedown и скрыть его, когда происходит событие mouseup, но когда я это делаю, отображаемое изображение блокирует последующие события мыши ("click" в частности) на элементы под этим изображением. Кстати, я использую jQuery.
Я уверен, что это как-то связано с бурлящим или размножающимся событием или несколько, но я не мог понять это. Любые указатели, пожалуйста?
Проверьте этот ответ на этот пост:
fooobar.com/questions/1303/...
Кажется, я делаю то, что понимаю, чего вы хотите достичь, используя чистый кроссбраузерный подход CSS.
pointer-events:none;
touch-action:none;
Билли Мун, ваш код почти работал. Вам просто нужно использовать hide и show вместо css:
$('#finger').click(function(e){
evt = e || window.event;
// make finger disappear
$('#finger').hide(0);
// get element at point of click
starter = document.elementFromPoint(evt.clientX, evt.clientY);
// send click to element at finger point
$(starter).click();
// bring back the finger
$('#finger').show(0);
});
Это непроверено - но оно основано на рабочем script моем, поэтому должно быть по правому краю. В принципе, вы должны сделать слой, который на этом пути исчезает на мгновение, поэтому вы можете использовать метод elementFromPoint, а затем вернуть его.
$('.selector').click(function(e){
evt = e || window.event;
// make finger disappear
$('.finger').css({display:'none'});
// get element at point of click
starter = document.elementFromPoint(evt.clientX, evt.clientY);
// send click to element at finger point
$(starter).click();
// bring back the finger
$('.finger').css({display:''});
});
Вы можете сделать это
$(document).bind('mousedown mouseup', function() {
$('.finger').toggle();
});