|
08 мая 2014
В чем разница: preventDefault(), stopPropagation() и stopImmediatePropagation()
|
| 01 |
Для понимания сути происходящего возьмем фрагмент html-кода, который будет использоваться в приведенных ниже примерах: |
|
| 02 | HTML |
1 2 3 4 5 <>
< >
Главная страница
</>
</> |
|
| 03 |
preventDefault() — предотвращает выполнение стандартного действия на событие: |
|
| 04 | JQuery |
1 2 3 4 5 6 $(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
//При клике на ссылку переход на страницу http://www.codius.ru осуществлен не будет.
});
}); |
|
| 05 |
stopPropagation() — прекращает распространение события к родительским элементам: |
|
| 06 | JQuery |
1 2 3 4 5 6 7 8 9 $(document).ready(function () {
$('a').click(function (e) {
e.stopPropagation();
//При клике на ссылку переход на страницу http://www.codius.ru осуществлен не будет.
});
$('div').click(function (e) {
alert('Это сообщение не появится, так распространение события было остановлено');
});
}); |
|
| 07 |
stopImmediatePropagation() — прекращает распространение события к родительским элементам и прекращает обработку этого события всеми последующими обработчиками: |
|
| 08 | JQuery |
1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function () {
$('a').click(function (e) {
e.stopImmediatePropagation();
});
$('a').click(function (e) {
alert('Обработчик 2. Это сообщение не появится, так как распространение события к родительским элементам было остановлено');
});
$('a').click(function (e) {
e.stopImmediatePropagation();
alert('Обработчик 3. Это сообщение не появится, так как распространение события к родительским элементам было остановлено');
});
}); |
|