Использование jQuery .on (), когда элемент селектора скрыт другим элементом - PullRequest
Новая
       10

Использование jQuery .on (), когда элемент селектора скрыт другим элементом

0 голосов
/ 26 февраля 2012

Я пытаюсь заставить мой обратный вызов события jQuery корректно запускаться, но я не могу обойти тот факт, что интересующий меня элемент не получил событие из-за другого элемента, который покрывает его на странице. Я могу суммировать это следующим образом (я разработал элементы, чтобы они отображались в jsfiddle): 

<div id='mydiv'>
    <div style="border: 1px solid; border-color: red; position: absolute; left: 0px; top: 0px; width: 200px; height: 200px; z-index: 100">Hello</div>
    <canvas style="border: 1px solid; border-color: yellow; position: absolute; left: 50px; top: 50px; width: 150px; height: 150px"></canvas>
</div>​

В приведенном выше сегменте, если я пытаюсь прослушивать щелчки мышью на <canvas>, событие никогда не вызывается: 

$('#mydiv').on('mousedown', 'canvas', this, function(ev) {
    console.log(ev.target);
});

Однако, если я изменю свой обработчик событий для прослушивания элемента <div>, обратный вызов будет запущен, как и ожидалось: 

$('#mydiv').on('mousedown', 'div', this, function(ev) {
    console.log(ev.target);
});

Как я могу принудить мой <canvas> к получению событий, оставив передний блок <div> на переднем крае?

Ответы [ 4 ]

1 голос
/ 26 февраля 2012

Это должно быть самое простое решение, как уже предлагалось:

http://jsfiddle.net/CUJ68/4/

$('canvas').on('mousedown', function(ev) {
    console.log(ev.target);
});
$('ul').on('mousedown', function(ev){
    $('canvas').mousedown();
});

, если вам нужны исходные данные события: 

$('canvas').bind('mousedown', function(ev, parentEV) {
    if(parentEV){
        console.log(parentEV);
        alert("Canvas INdirectly clicked!");
    }else{
        console.log(ev);
        alert("Canvas directly clicked!");
    }
});
$('ul').on('mousedown', function(ev){
    $('canvas').trigger('mousedown', ev);
});
1 голос
/ 26 февраля 2012

Вы не можете. Объекты сверху получают события щелчка. Вот как работает DOM.

Если вы хотите обработать это событие щелчка, вам нужно будет обработать объект сверху или использовать всплывающее окно и обработать его в родительском объекте. Вы можете обработать его в верхнем объекте и «переслать» его другому объекту, если хотите, запуская щелчок по этому другому объекту или просто вызывая обработчик щелчка напрямую.

Или вы можете переместить элемент canvas над ul, установив для него z-index более высокое значение, и тогда он получит событие click.

Или вы можете создать новый прозрачный холст, который находится сверху, чтобы получить событие, оставив два других объекта там, где они находятся, для желаемого визуального эффекта.

1 голос
/ 26 февраля 2012

Вы можете привязать элемент к ближайшему общему родителю и проверить, находятся ли координаты X и Y мыши в пределах диапазона холста.

  • В приведенном ниже примере я кэшировал размеры (высоту и ширину) холста, потому что я предполагаю, что они постоянны. Переместите это внутрь функции, если размеры не постоянны.

  • Я использую метод .offset() для вычисления действительных координат X и Y верхнего левого угла <canvas> s. Я вычисляю координаты нижнего правого угла, добавляя значения outerWidth() и .outerHeight().

Базовая демонстрация: http://jsfiddle.net/75qbX/2/

var $canvas = $('canvas'), /* jQuery reference to the <canvas> */
    $canvasWidth = $canvas.outerWidth(), /* assuming height and width to be constant */
    $canvasHeight = $canvas.outerHeight();
function isCanvasClicked(x, y, target) {
    if (target.tagName === 'CANVAS') return true;
    var offset = $canvas.offset(),
        left = offset.left,
        top = offset.top;

    return x >= left && x <= left + $canvasWidth &&
           y >= top && y <= top + $canvasHeight;              
}
$('#mydiv').on('mousedown', '*', this, function(ev) {
    if (isCanvasClicked(ev.pageX, ev.pageY, ev.target)) {
        $canvas.fadeOut().fadeIn();
    }
});
0 голосов
/ 26 февраля 2012

Здесь у вас есть решение, которое состоит в захвате события клика на вышеуказанном элементе и запуске события на другом: регистрации кликов на элементе, который находится под другим элементом

...