Как остановить распространение событий с помощью встроенного атрибута onclick?

Question

Как остановить распространение событий с помощью встроенного атрибута onclick?

Учтите следующее:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

Как я могу сделать так, чтобы, когда пользователь нажимает промежуток, он не запускает divсобытие клика?

384

javascript html dom events

Источник

user43005 22 дек '08 в 23:17

16 ответов

Решение

Есть два способа получить объект события внутри функции:

Первый аргумент в W3C-совместимом браузере (Chrome, Firefox, Safari, IE9+)
Объект window.event в Internet Explorer (<=8)

Если вам нужно поддерживать устаревшие браузеры, которые не следуют рекомендациям W3C, обычно внутри функции вы используете что-то вроде следующего:

function(e) {
  var event = e || window.event;
  [...];
}

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

onclick="var event = arguments[0] || window.event; [...]"

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

223

Источник

user31582 23 дек '08 в 00:20

Имейте в виду, что window.event не поддерживается в FireFox, и поэтому оно должно быть примерно таким:

e.cancelBubble = true

Или вы можете использовать стандарт W3C для FireFox:

e.stopPropagation();

Если вы хотите стать модным, вы можете сделать это:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

86

Источник

user9209 23 дек '08 в 00:06

Используйте эту функцию, она проверит наличие правильного метода.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

47

Источник

user570304 24 фев '11 в 17:28

У меня была та же самая проблема - окно ошибки js в IE - это прекрасно работает во всех браузерах, насколько я вижу (event.cancelBubble=true делает работу в IE)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

22

Источник

user1417106 25 май '12 в 09:58

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

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

14

Источник

user1489992 13 авг '14 в 15:01

Я не могу комментировать из-за Кармы, поэтому я пишу это как полный ответ: Согласно ответу Гарета (var e = arguments[0] || window.event; [...]) я использовал этот oneliner, встроенный в onclick для быстрый взлом:

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

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

10

Источник

user3611941 23 окт '19 в 07:50

Для веб-страниц ASP.NET (не MVC) вы можете использовать Sys.UI.DomEvent объект как оболочка нативного события.

<div onclick="event.stopPropagation();" ...

или передать событие в качестве параметра внутренней функции:

<div onclick="someFunction(event);" ...

и в некоторых функциях:

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

10

Источник

user1597776 30 июн '13 в 22:00

Согласно этой странице, в IE вам нужно:

event.cancelBubble = true

7

Источник

user13936 22 дек '08 в 23:28

Используйте отдельный обработчик, например:

      function myOnClickHandler(th){
//say let t=$(th)
}

а в html сделать так:

      <...onclick="myOnClickHandler(this); event.stopPropagation();"...>

Или даже :

      function myOnClickHandler(e){
  e.stopPropagation();
}

за:

      <...onclick="myOnClickHandler(event)"...>

6

Источник

user1018154 06 дек '20 в 21:20

Почему бы просто не проверить, какой элемент был нажат? Если вы нажмете на что-то, window.event.target присваивается элементу, по которому был выполнен щелчок, и этот элемент также может быть передан в качестве аргумента.

Если цель и элемент не равны, это было событие, которое распространялось вверх.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

3

Источник

user2893090 31 окт '16 в 18:38

      Event.preventDefault()

это текущая норма, и единственное, что сработало для меня. См.: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault .

          <button value=login onclick="login(event)">login</button>

//and in a script tag
function login(ev){
    ev.preventDefault()
    
    return false;
}

это работало в последних версиях Chrome, Opera и IE. (страница Mozilla указывает, что Firefox тоже может это сделать, поэтому я даже не проверяю!)

2

Источник

user638258 01 авг '22 в 13:44

Скрипт

      function handleTeste(e) {
  const event = e || window.event;

  event.preventDefault();
  event.stopPropagation();

  console.log("Clicked");
}

HTML

      <div class="favorite" onclick="handleTeste(event)">
  <i class="fa-duotone fa-heart fs-2 text-hover-gray-800 text-primary"></i>
</div>

1

Источник

user13552638 06 апр '23 в 21:41

Это также работает - в ссылке HTML используйте onclick с return следующим образом:

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

И тогда функция comfirmClick() должна выглядеть так:

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

1

Источник

user564016 06 июн '13 в 15:36

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

1

Источник

user95733 03 янв '16 в 22:04

Лучшим решением будет обработка события с помощью функции javascript, но для того, чтобы использовать простое и быстрое решение с использованием элемента html напрямую и после того, как "событие" и "window.event" устарели и не поддерживаются повсеместно (https://developer.mozilla.org/en-US/docs/Web/API/Window/event), я предлагаю следующий "жесткий код":

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>

0

Источник

user6645736 23 фев '20 в 05:37

Другие вопросы по тегам javascript html dom events

user21677 22 дек '08 в 23:22 2008-12-22 23:22 · Accepted Answer · 2008-12-22 23:22

Используйте event.stopPropagation ().

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

Для IE: window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

370

Источник

user21677 22 дек '08 в 23:22