2012-06-17 14 views
13

Вот простой пример задачи:Нажмите событие для элемента вложен в Баттона

<body> 
    <button id="parent" onclick="alert('parent')"> 
     <span id="child" onclick="alert('child')">Authenticate</span> 
    </button> 
</body> 

В Chrome это предупреждает «ребенок», затем «родителя», но в IE/FF мы только получаем «Родитель» ,

Понятно, что это можно устранить несколькими способами (сменить кнопку на div, удалить пробел и т. Д.), Но я хотел выяснить, был ли способ сделать эту работу (т. Е. Предупреждение «ребенок») без изменения HTML.

Спасибо!

PS: Пробовал JQuery, и это имеет такое же поведение.

+0

Похоже, в одном браузере событие пузырьков в верхней части, в другом нет. Или что-то в этом роде ... Я не эксперт в «пузырях событий», но это поисковый термин, который, я думаю, даст результаты! –

+0

@JonathanNicol, это не пузырь событий, это туннелирование событий. –

+6

Помещение элемента clickable внутри '

ответ

2

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

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

Это будет путь, учитывая ваш случай использования, имо:

$('your-button-container').click(function(event){ 
    console.log(event.originalEvent.srcElement); 
}); 

Провести необходимые проверки на event.originalEvent.srcElement и действовать соответствующим образом.

Edit: Не используя JQuery, он бы так:

yourButtonContainer.addEventListener(function(event){ 
    console.log(event.srcElement); 
}); 
0

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

HTML:

<body> 
    <button id="parent" onclick="callFn(event, 'parent')"> 
    <span id="child" onclick="callFn(event, 'child')">Authenticate</span> 
    </button> 
</body> 

JS:

window.callFn = function(evt, type) { 
    if (type === 'child') { 
    alert(type); 
    } 
} 

JS Fiddle: https://jsfiddle.net/4vo3arpf/4/

Смежные вопросы