Два разных OnClick на двух делениях, один над другим

Question

У меня есть два div, один большой и меньший по сравнению с другим, каждый div имеет свой собственный метод OnClick. Проблема, с которой я столкнулся, заключается в том, что когда я щелкаю меньший элемент div, вызывается также метод OnClick большого элемента div.

Кто мне этого избежать?

Answer 1

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

function amIclicked(e, element)
{
    e = e || event;
    var target = e.target || e.srcElement;
    if(target.id==element.id)
        return true;
    else
        return false;
}
function oneClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('One is clicked');
    }
}
function twoClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('Two is clicked');
    }
}

Этот метод javascript может быть вызван перед выполнением скрипта

Пример

<style>
&#35;one
{
    width: 200px;
    height: 300px;
    background-color: red;
}
&#35;two
{
    width: 50px;
    height: 70px;
    background-color: yellow;
    margin-left: 10; 
    margin-top: 20;
}

</style>



<div id="one" onclick="oneClick(event, this);">
    one
    <div id="two" onclick="twoClick(event, this);">
        two
    </div>
</div>

Надеюсь, это поможет.

Answer 2

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

Самое простое решение - добавить return false ваш обработчик.

Если вы используете jQuery , вы можете позвонить e.stopPropagation();, в противном случае вам нужно будет позвонить e.stopPropagation(), если он существует, и установить event.cancelBubble = true.

Для получения дополнительной информации см. здесь .

Answer 3

То, с чем вы имеете дело, это пузыри событий. Взгляните на эту статью: http://www.quirksmode.org/js/events_order.html.

По сути, чтобы остановить передачу события родительскому элементу, вы можете использовать что-то вроде этого:

document.getElementById('foo').onClick = function(e) {

    // Do your stuff

    // A cross browser compatible way to stop propagation of the event:
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 4

Вы столкнулись с распространенным случаем распространения событий. Проверьте quirksmode.org , чтобы получить полную информацию о том, что именно происходит. В основном, что вам нужно сделать в обработчике кликов меньшего div:

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

Answer 5

Это сработало для меня в Jquery:

$('#outer_div').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("outer div is clicked")                   

});

Таким образом, если текущая цель не совпадает с внешним div, она ничего не сделает. Вы можете реализовать нормальные функции для дочернего элемента.

Answer 6

Если вы решите использовать библиотеку javascript, например www.jquery.com, вы можете легко выполнить то, что вы пытаетесь сделать, используя параметры предотвращения распространения.