Как остановить событие onclick в div от распространения до документа?

Я хочу прекратить распространение этого события div onclick в документе? Когда пользователь нажимает на "div", появляются оба предупреждения: 1) предупреждение div и 2) предупреждение документа. Я хочу подавить оповещение документа.

Я знаю, как это сделать, используя addEventListener, но есть ли другой способ сделать это? Проблема ниже в том, что я не знаю, как получить ahold события - я попробовал "event = element.onclick", как показано ниже, но это не работает. Как мне получить событие?

<head>
<script>
  function showMenu(element) {
      alert("div clicked");
      event = element.onclick;  // HOW TO GET HOLD OF THE EVENT?
      // Don't propogate the event to the document
      if (event.stopPropagation) {
          event.stopPropagation();   // W3C model
      } else {
          event.cancelBubble = true; // IE model
      }
  }

  document.onclick = function() {
      alert('document clicked');
  };
</script>
</head>

<body>
  <div id="foodmenu" onclick="showMenu(this);">Click inside this div</div>
  or click outside the div.
</body>

Ответ 1

Измените определение функции, чтобы включить событие:

function showMenu(event, element) {
  alert("div clicked");
  // Don't propogate the event to the document
  if (event.stopPropagation) {
      event.stopPropagation();   // W3C model
  } else {
      event.cancelBubble = true; // IE model
  }
}

Затем измените вызов для передачи в событии:

div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>

Ответ 2

Попробуйте EventListeners:

HTML:

<div id="fooddmenu">Click inside this div</div>or click outside the div.

JS:

function showMenu(e) {
    alert("div clicked");
}

document.onclick = function() {
    alert('document clicked');
};

window.onload = function(){
    document.getElementById("fooddmenu").addEventListener("click", function(e){
        showMenu(this);
        e.stopPropagation();

    });
};

Ответ 3

хорошо, что код jquery. $ ( "# id" ) так же, как document.getElementById( "id" )

.click функция такая же, как addEvent ("click", function() {...});

так что в основном обе функции имеют обработчики кликов для родительских и дочерних DIV.

Наблюдайте результат, комментируя/раскомментируя "return false"; утверждение.

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

Кстати, извините за путаницу "$".

Ответ 4

Добавьте onclick в элемент body.

Ответ 5

$("div").click(function(){
  ...
  ...
  ...

  return false; //this will stop the further propagation of the event
});

Ответ 6

Дуглас, Он не останавливает событие от пузырей.

Отметьте http://jsbin.com/ahoyi/edit

здесь, если вы прокомментируете оператор предупреждения, он отобразит 2 предупреждения при нажатии на меньшее поле еще только один.

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