Как я могу пропустить щелчок через элемент?

Question

Я хочу отображать изображение под мышью (палец, имитирующий сенсорный экран), когда происходит событие mousedown, и скрывать его, когда происходит событие mouseup, но когда я это делаю, отображаемое мной изображение блокирует последующие события мыши.(в частности, «щелкнуть») по элементам под этим изображением.Между прочим, я использую jQuery.

Я уверен, что это как-то связано с пузырями или распространением событий или чем-то еще, но я не мог понять это.Любые указатели, пожалуйста?

Answer 1

Ознакомьтесь с ответом на этот пост:

https://stackoverflow.com/a/4839672/589909

Кажется, что я делаю то, что понимаю, чего вы хотите достичь, используя чистый кросс-браузерный подход CSS.

pointer-events:none;

Answer 2

Билли Мун, твой код почти работал.Вы просто должны использовать Hide and 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);
});

Answer 3

Это не проверено - но основано на моем рабочем сценарии, поэтому должно быть в правильном направлении. По сути, вы должны сделать так, чтобы слой, который находится на пути, исчез на мгновение, поэтому вы можете использовать метод 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:''});
});

Answer 4

Вы можете сделать это

$(document).bind('mousedown mouseup', function() {
    $('.finger').toggle();
});

Проверить рабочий пример на http://jsfiddle.net/2cSj4/2/