Javascript xpath指针-对话框赢得'；关不上_Javascript_Jquery_Xpath

Javascript xpath指针-对话框赢得'；关不上

javascript jquery xpath

Javascript xpath指针-对话框赢得'；关不上,javascript,jquery,xpath,Javascript,Jquery,Xpath,我有一个任务，我需要用鼠标指向页面中的一个元素，根据指向的xpath，应该出现一个弹出窗口，用户应该对该xpath进行分类。代码如下所示我使用JQuery。问题是在我指向一个元素后，对话框不会关闭。我的代码有什么问题 <html lang="en"> <head> <meta charset="utf-8"> <title>Xpath classification</title> <link rel="s

我有一个任务，我需要用鼠标指向页面中的一个元素，根据指向的xpath，应该出现一个弹出窗口，用户应该对该xpath进行分类。代码如下所示

我使用JQuery。问题是在我指向一个元素后，对话框不会关闭。我的代码有什么问题

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Xpath classification</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>

        function getXPath(element) {
            var xpath = "";
            for (; element && element.nodeType == 1; element = element.parentNode) {
                var id = $(element.parentNode).children(element.tagName).index(element) + 1;
                id > 1 ? (id = "[" + id + "]") : (id = "");
                xpath = "/" + element.tagName.toLowerCase() + id + xpath;
            }
            return xpath;
        }

        $(document).click(function (event) {
            popup(event);
        });


        function popup(event) {
            var xpath = getXPath(event.target);

            $("<div></div>").dialog({
                width: 340,
                modal: true,
                open: function () {
                    $(this).html("The xpath type of " + xpath + " is:");
                },
                buttons: {
                    "It's type A element": function () {
                        /* Do some code of type A elements...
                         * ...
                         */
                        $(this).dialog("close");
                    },
                    "It's type B element": function () {
                        /* Do some code of type A elements...
                         * ...
                         */
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
        ;
    </script>
</head>
<body>

    <h1>This is a header element</h1>
    <p>This is an element and a link: <a href="http://example.com">the link</a>.</p>

</body>


Xpath分类
函数getXPath（元素）{
var xpath=“”；
对于（；element&&element.nodeType==1；element=element.parentNode）{
变量id=$（element.parentNode）.children（element.tagName）.index（element）+1；
id>1？（id=“[”+id+”）：（id=“”）；
xpath=“/”+元素.tagName.toLowerCase（）+id+xpath；
}
返回xpath；
}
$（文档）。单击（函数（事件）{
弹出（事件）；
});
功能弹出窗口（事件）{
var xpath=getXPath（event.target）；
$（“”）。对话框({
宽度：340，
莫代尔：是的，
打开：函数（）{
$（this.html）（“+xpath+的xpath类型为：”；
},
按钮：{
“它是类型A元素”：函数（）{
/*做一些A型元素的代码。。。
* ...
*/
$（此）.dialog（“关闭”）；
},
“它是类型B元素”：函数（）{
/*做一些A型元素的代码。。。
* ...
*/
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
}
;
这是一个标题元素
这是一个元素和一个链接：

问题在于，从对话框中选择的单击事件立即在文档上触发了另一个单击事件，有效地阻止了对话框关闭。我已将

单击事件更改为dblclick
，即双击。这是一个对我来说足够的解决方法，因此双击不会触发另一个单击事件。
请为此提供JSFIDLE