javascript - JS 菜鸟——为什么 document.onclick 不能正常工作？

Question

我正在尝试使图片库在单击链接时出现，并在随后单击浏览器窗口中的任何位置时消失。我可以更改与点击“galleryshow”元素相关的功能，这样如果我点击它，画廊就会显示出来，如果我再次点击它，画廊就会消失；但是如果我尝试做到这一点，那么如果单击窗口(或文档)，画廊就会关闭，什么也不会发生。

这是我的代码:

function gallerymake() {

    document.onclick = function () {gallerytake();};
   // document.getElementById("hoverage").onclick = function() {gallerytake();}; 
    document.getElementById("galleryhold").style.visibility="visible";
}

  function gallerytake(){
    document.getElementById("hoverage").onclick = function () {gallerymake();};
    document.getElementById("galleryhold").style.visibility="hidden";
  }

谢谢

Answer 1

freejosh 的回答有效。但是，如果有其他处理程序使用事件委托(delegate)，则调用 e.stopPropagation() 可能会产生不良副作用，因为这些处理程序可能不会被调用。

事件处理的基本原则之一是它们不应该影响或尽可能依赖于其他处理程序，比如您有两个按钮需要显示两个不同的 div。通过调用 e.stopPropagation()，clicking on one of the popups would not hide the other popup .参见 document.click keep toggling the menu例如，由于它与灯箱事件处理程序发生冲突，因此无法正常工作。因此，不影响任何其他代码的解决方案是安装一个文档点击处理程序，该处理程序仅在点击不是来自按钮或您的弹出窗口中时才起作用。

http://jsfiddle.net/b4PXG/2/

HTML

Here is my web page <button id="show-btn"> show popup</button>

<div id="modal" > I will show over everything <a href="http://google.com" target="_blank">Google</a></div>​

JS

var modal = document.getElementById('modal');
var btn = document.getElementById('show-btn');

btn.onclick = function() {
    modal.style.display = "block";   
};

document.onclick = function (e) {
    e = e || window.event;      
    var target = e.target || e.srcElement;
    if (target !== btn && (!target.contains(modal) || target !== modal)) {
        modal.style.display = 'none';
    }  
}

您可以将此模式抽象为 function that creates the doc click handlers

/**
 * Creates a handler that only gets called if the click is not within any 
 * of the given nodes
 * @param {Function} handler The function to call (with the event object as
 *        as its parameter)
 * @param {HTMLElement} exclude... If the click happens within any of these
 *        nodes, the handler won't be called
 * @return {function} A function that is suitable to be 
 *         bound to the document click handler
 */ 
function createDocClickHandler(handler /* [,exclude, exclude, ...] */) {
    var outerArgs = arguments;
    return function (e) {
        e = e || window.event;      
        var target = e.target || e.srcElement;
        // Only call the original handler if the click was outside all the excluded nodes
        var isWithinExcluded = false;
        for (var i=1; i < outerArgs.length; i++) {
            var excluded = outerArgs[i];
            if (target === excluded || excluded.contains(target)) {
                isWithinExcluded = true;
                break;
            }
        }

        if (!isWithinExcluded) {
            handler.call(this, e);
        }
    }
}

var modal = document.getElementById('modal');
var btn = document.getElementById('show-btn');

btn.onclick = function() {
    modal.style.display = "block";   
};


// Assign the handler that will hide the popup if the clicked
// happened outside of modal and btn       
document.onclick = createDocClickHandler(function (e) {
    modal.style.display = 'none';
}, modal, btn);