Остановить пересылку событий от дочерних элементов к родительским - PullRequest
Новая
       1

Остановить пересылку событий от дочерних элементов к родительским

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

предположим, что у нас есть следующий код: 

<body style="overflow: hidden">
    <div class="wall">
        <button>New</button>
        <div class="prova">
            <a href="localhost">ciao !</a>
        </div>
       <div class="prova">
            <a href="localhost">miao !</a>
        </div>
    </div>
</body>

и следующий код js / jquery: 

function onBoot()
{
    $(".prova").draggable();

    $(".wall").mousedown(onMouseDown);
    $(".wall").mouseup(onMouseUp);
}


function onMouseDown(e)
{
    console.log("down");
}

function onMouseUp(e)
{
    console.log("up");
}


$(onBoot);

Теперь я правильно вижу кнопку и два элемента div.Когда я нажимаю «стена» (родительский div), я вижу «вниз» / «вверх» на консоли, как и ожидалось.Тем не менее, я вижу «вниз» / «вверх» на консоли также, когда я нажимаю «diva» и кнопку «prova» тоже.Я знаю о концепции «всплытия», для которой событие пересылается от дочерних элементов к родительским элементам, и я хочу предотвратить это, но без указания явного обработчика событий в div «prova».Возможно ли это?

Ответы [ 2 ]

2 голосов
/ 17 февраля 2012

В вашем обработчике событий (OnMouseDown, OnMouseUp) проверьте, равняется ли e.currentTarget e.target. См. jQuery Events документацию :

Часто бывает полезно сравнить event.target с этим, чтобы определить, обрабатывается ли событие из-за пузырьков событий. Это свойство очень полезно при делегировании событий, когда всплывают события.

Так, например: 

function onMouseDown(e)
{
    if(e.currentTarget !== e.target)
        return;

    console.log("down");
}
2 голосов
/ 17 февраля 2012

Вы можете проверить оригинаторы className, например: 

function onMouseDown(e)
{
  e = e || event;
  if ((e.srcElement || e.target).className === 'wall') {console.log("down");}
  return true;
}

см. это jsfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...