jquery - 如果单击按钮则清除文本

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

您将点击绑定(bind)到“body”，它不会记录浏览器窗口中任何位置的点击，仅在已生成的 DOM 内记录点击(因此在您的情况下，它不会记录点击，例如在“验证”按钮下方)。最好绑定(bind) 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