如果單擊按鈕，則清除文本

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

和演示

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()做同樣的事情。