Триггер на клике в любом месте документа, даже с iframe?

Итак, я создаю виджет, который должен «закрываться», если пользователь щелкает где-нибудь за его пределами.Триггер на клике в любом месте документа, даже с iframe?

Очевидным решением является установка обработчика кликов на документ. Это нормально, за исключением того, что есть другие части приложения, которые используют event.stopPropagation(). Поэтому мы используем этап захвата в нашем слушателе, чтобы обойти это.

Это работает на все, кажется, за исключением iframe. Я сделал simple jsfiddle to demonstrate what I'm talking about. Стенограмма код:

var c = document.getElementById('clickme'); 
var s = document.getElementById('stop'); 
var t = document.getElementById('text'); 

document.addEventListener('click', function (event) { 
    if (event.target !== c) { 
    t.innerHTML += 'outside <br>'; 
    } else { 
    t.innerHTML += 'inside <br>'; 
    } 
}, true); //true to use capturing phase 

s.addEventListener('click', function (event) { 
    event.stopPropagation(); 
});

И установка:

<html> 
<body> 
    <p>Clicking anywhere but the button counts as an 'outside' click. However, clicks within the iframe do not trigger the event listener.</p> 
    <div><button id="clickme">Click me!</button></div> 
    <iframe>lalala</iframe> 
    <div><button id="stop">Even Me, and I stopPropagation()</button></div> 
    <div id="text"></div> 
</body> 
</html>

Есть ли способ, чтобы сделать этот обработчик также вызвать на щелчки внутри/на IFRAME? Кроме того, в то время, когда я присоединяю слушателя событий, я не буду ссылаться на iframe, поэтому решение, которое не требует этого, было бы лучше.

источник

2014-10-20 Cory G.

Вы можете обнаружить событие click внутри iframe, только если оно находится в том же домене. См. Ответ @Tim Down на JavaScript: Detection of a link click inside an iframe

Если iframe находится в другом домене, вы можете воспользоваться тем фактом, что событие размытия будет происходить в документе при нажатии на iframe. Вам нужно установить tabIndex на элемент тела для этой работы:

document.body.tabIndex= 0; 

document.addEventListener('blur', function (event) { 
    t.innerHTML += 'outside <br>'; 
}, true);

Обратите внимание, что несколько щелчков внутри фрейма будет вызывать только одно событие размытости.

Fiddle: http://jsfiddle.net/zrgrt9pf/13/

источник

2014-10-20 23:04:55

Ууу, я не понял, что щелчок внутри фрейма будет вызывать размытие. Я думаю, что это подойдет моим целям довольно красиво! –

Триггер на клике в любом месте документа, даже с iframe?

ответ

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