Question

我需要创建一个页面，显示页面上任何位置发生点击的次数以及点击发生的位置列表。我还有一个清除列表的按钮。按钮不清除。按钮单击计为页面正文上的单击，这会增加计数并且永远不会清除它。

HTML：

<p><h3>Click count:<span id="output">
                </span></h3></p>


                <h3>Click locations:</h3>
                <div id="clickLocations"></div> 
        <input id="btn" type="button" value="Validate">

<script>
$(document).ready(function() {
    var count = 0;
    $("body").click(function (event) {

        count += 1; //Count clicks when the body is clicked
        if (count > 0) {
            $("span#output").html(" " + count);
            $("div#clickLocations").append("<ul><li>" + event.pageX + ", " + event.pageY + "</li></ul>"); //Display the x,y location of the click

        }
        $('#btn').click(function () { //Clear text when the button is clicked
            $("div#clickLocations").html('');
            $("span#output").empty();

            event.stopPropagation();
        }); //End button.click 
    }); //End body.click
}); //End document.ready

</script>

Answer 1

您将点击绑定到“正文”，这不会在浏览器窗口的任何位置记录点击次数，只会在已生成的DOM中记录（因此在您的情况下，它不会记录点击次数，例如在“验证”按钮下方）。最好绑定do'document'来捕获整个窗口中的点击。

如果您不想计算按钮上的点击次数，则需要检查点击源，然后只需对这些点击进行折扣即可。单击验证后，您可能还需要重置计数器。

这是代码

$(document).ready(function() {
    var count = 0;
    //note this will capture events everywhere in the window
    $(document).click(function (event) {

        //do not count the button click
        if (event.target.id=="btn") {
            $("div#clickLocations").html('');
            $("span#output").empty();
            //reset counter
            count = 0;
            event.stopPropagation();
        } else {
            count += 1; //Count clicks when the body is clicked
            if (count > 0) {
                $("span#output").html(" " + count);

                // Display the x,y location of the click
                $("div#clickLocations").append("<ul><li>" + event.pageX + ", "
                                   + event.pageY + "</li></ul>");
            }
        }
    }); //End body.click
}); //End document.ready

And the demo

Answer 2

将一个事件处理程序绑定到另一个事件处理程序中几乎总是错误的。这会导致将多个处理程序添加到内部元素，因为每次外部处理程序触发时都会重复它。代码中的另一个问题是内部处理程序中的event引用了触发外部处理程序的事件，因为内部处理程序没有event参数。

试试这个：

$(document).ready(function() {
    var count = 0;
    $("body").click(function (event) {

        count += 1; //Count clicks when the body is clicked
        if (count > 0) {
            $("span#output").html(" " + count);
            $("div#clickLocations").append("<ul><li>" + event.pageX + ", " + event.pageY + "</li></ul>"); //Display the x,y location of the click

        }
    }); //End body.click
    $('#btn').click(function (event) { //Clear text when the button is clicked
        $("div#clickLocations").html('');
        $("span#output").empty();

        event.stopPropagation(); // Prevent button click from being counted
    }); //End button.click 
}); //End document.ready

DEMO

BTW，html('')和empty()做同样的事情。

如果单击按钮，则清除文本

2 个答案: