Question

我有一个点击功能，当用户点击div中的任意位置时，它会成功运行。但是，div内部有一个链接。如果用户单击该链接，我不想运行该功能，以便用户在单击时转到链接URL。

HTML

<div id="container">
<a href="http://www.example.org"></a>
</div>

Jquery的

$(document.body).on('click', '[id="container"]' ,function(){
// do whatever
});

我应该使用哪种方法来实现这一目标？

Answer 1

您可以按如下方式检查点击目标：

$(document.body).on('click', '#container' ,function(e){
    if (e.target.id !== 'container') return; // not the element we want
    // do whatever
});

或者，如果div的任何其他孩子应该被允许，除非它是a元素，那么：

$(document.body).on('click', '#container' ,function(e){
    if (e.target.tagName === 'A') return; // not the element we want
    // do whatever
});

Answer 2

我相信如果你这样做，应该工作：

    $("#container a").click(function(e) {
        e.stopPropagation();
   });

希望它有所帮助！：）

Answer 3

试试这个：

$(document).ready(function(){

    $("#container").on("click",function(e){

        if(e.target.tagName == "DIV") {
            fun();
        }


        else if(e.target.tagName == "A") {
            e.stopPropagation();
            }


    })

    function fun() {
        alert("Run function");
    }
})

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        <div id="container">div
           <a href="http://www.example.org">Link</a>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
    $(document).ready(function(){

        $("#container").on("click",function(e){

            if(e.target.tagName == "DIV") {
                fun();
            }


            else if(e.target.tagName == "A") {
                e.stopPropagation();
                }


        })

        function fun() {
            alert("Run function");
        }
    })
        </script>
    </body>
</html>

＆＃13;

Jquery单击div的函数，但不是div中的链接？

4 个答案: