сохранить функциональность ссылок внутри div, который имеет событие onclick

Question

У меня есть div, в котором onclick скрывает div.

Если у меня есть ссылка внутри div, ссылка не работает, потому что onclick украдет щелчок.

Желаемый результат: если в любом месте внутри div выполняется щелчок, НО ссылка, то div скрывается. Если по ссылке сделан щелчок, я хочу, чтобы ссылка открывалась в пустом окне, а div оставался видимым.

Есть ли способ справиться с этим с помощью JavaScript?

Answer 1

document.getElementById('yourlinksid').onclick = function(e){

   // ... pop your window ...

   /* the following prevents the event from "bubbling up"
      to the div's event handler */
   if(!e.stopPropagation) {
      e.cancelBubble = true;
      return;
   }

   e.stopPropagation();    
};

Проверка:

http://jsfiddle.net/kSTNT/4/

Answer 2

DEMO

Внутри обработчика кликов для ссылки вам нужно вызвать event.stopPropagation или установить для e.cancelBubble значение true - в зависимости от того, что предпочитает ваш браузер. Это предотвратит всплытие события в ваш div.

document.getElementById("thelink").onclick = function (e) {
    window.open();
    if (e.stopPropogation)
        e.stopPropogation();
    if (e.cancelBubble != null)
        e.cancelBubble = true;
};

Answer 3

Если вы управляете ссылками, самый простой способ - добавить onclick = "event.stopPropagation ();"(или какой-либо другой кросс-браузерной версией) для каждой ссылки, которая не позволяет div увидеть событие, не препятствуя эффекту ссылки по умолчанию.

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