javascript - 如何在弹出区域上一键消除弹出气泡

Question

当用户双击网页时，我正在使用以下代码创建弹出气泡：

function displaySomething(x, y) {
var div = document.createElement("div");
div.id = "displaySomething_div";
    ....
}

var listener = function (event) {
    if (event.button == 0 ) {
        var div = document.getElementById("displaySomething_div");
    if (div) {
        document.body.removeChild(div);
    }
        displaySomething(event.pageX, event.pageY);
    } 
};

document.addEventListener("dblclick", listener, false);

目前，只有当我双击页面或气泡时，弹出气泡才会消失。

只有在页面的非气泡区域上单击一次，才能消除弹出气泡？也就是说，如果我在气泡上单击或选择，气泡将停留在那里。

Answer 1

将单击处理程序添加到停止传播单击事件的弹出 div，然后您可以安全地将单击处理程序附加到文档父级。

示例：http: //jsfiddle.net/M6asx/

function displaySomething(x, y) {
    var div = document.createElement("div");
    div.id = "displaySomething_div";
    ...
    div.addEventListener('click', function(e) { e.stopPropagation(); }, false);
}

var listener = function (event) {
    if (event.button == 0) {
        var div = document.getElementById("displaySomething_div");
        if (div) {
            document.body.removeChild(div);
        } else {
            displaySomething(event.pageX, event.pageY);
        }
    }
};

document.addEventListener('click', listener, false);