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添加一个单击处理程序，以停止click事件的传播，然后您可以安全地将单击处理程序附加到文档父级。

示例：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);

如何通过单击ono-popup区域来解除弹出气泡

1 个答案: