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

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

您正在将您的点击绑定到“body”，它不会记录浏览器窗口中任何地方的点击，只会在已经生成的 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

顺便说一句，html('') 和 empty() 做同样的事情。