停用點擊事件的最佳方法是

Question

在我的網頁上，我有一個容器，該容器在單擊時會變成其他東西，然后我的意圖是使其保持在單擊后的狀態：

                <div id="macheps-holder">
                   <p>Click here to see your browser's machine epsilon!</p>
                    <script type="text/javascript">
                        $(document).ready()
                        {
                            var temp1 = 1.0, temp2, macheps;
                            do {
                                macheps = temp1
                                temp1 /= 2
                                temp2 = 1.0 + temp1
                            } while (temp2 > 1.0)
                            var mh = $('#macheps-holder');
                            mh.click(function()
                            {
                                mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
                                mh.click(function()
                                {
                                    return;
                                })
                            });
                        }
                    </script>
                </div>

您還可以看到，我所做的是使click函數的主體更改為click函數return; ，即什么也不做。 我想知道是否有一種更優雅，更適當的方式來完成此行為。

感謝您的時間。

Answer 1

您已完成的操作並未按照您想的做...在每次單擊中，將執行第一個單擊處理程序，該操作將使用相同的文本重置元素的html，然后添加一個新的空單擊處理程序...下次單擊將執行第一個處理程序以及新添加的空白處理程序...因此，在第4次單擊上，將使第一個處理程序執行一次，空白處理程序執行3次

問題

 $(document).ready(function() { var temp1 = 1.0, temp2, macheps, counter; do { macheps = temp1 temp1 = temp1 / 2 temp2 = 1.0 + temp1 } while (temp2 > 1.0) var mh = $('#macheps-holder'); mh.click(function() { counter = 0; log('default handler'); mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>"); mh.click(function() { log('click: ' + counter++) return; }) }); }) var log = (function() { var $log = $('#log'); return function(msg) { $('<p/>', { text: msg }).appendTo($log) } })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="macheps-holder"> <p>Click here to see your browser's machine epsilon!</p> </div> <div id="log"></div> 

由於您只希望單擊處理程序執行一次，因此請使用.one（）

$(document).ready(function () {
    var temp1 = 1.0,
        temp2, macheps;
    do {
        macheps = temp1
        temp1 /= 2
        temp2 = 1.0 + temp1
    } while (temp2 > 1.0)
        var mh = $('#macheps-holder');
    mh.one('click', function () {
        mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    });
})

Answer 2

首先，jQuery的ready函數不正確。 您應該將callback給它，如下所示：

$(document).ready(function() { ... })

第二。 您可以為click事件創建一個單獨的函數callback ，並從event listener list添加或刪除。 因此，您可以編寫以下代碼：

function clickHandler(event) { ... }

// add
mh.on('click', clickHandler);

// remove
mh.off('click', clickHandler);

最終代碼如下所示：

 $(document).ready(function() { var temp1 = 1.0, temp2, macheps; do { macheps = temp1 temp1 /= 2 temp2 = 1.0 + temp1 } while (temp2 > 1.0) var mh = $('#macheps-holder'); function clickHandler() { mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>"); mh.off('click', clickHandler); // remove click event handler } mh.on('click', clickHandler); // add click event handler }) 

您可以閱讀有關jQuery 開啟和關閉功能的更多信息。

Answer 3

您可以在此處使用.one() ，該鏈接僅允許單擊一次鏈接，請參見以下代碼。

one（）API文檔

<script type="text/javascript">
   $(document).ready()
   {
     var temp1 = 1.0, temp2, macheps;
     do {
          macheps = temp1
          temp1 /= 2
          temp2 = 1.0 + temp1
     } while (temp2 > 1.0)

    var mh = $('#macheps-holder');
    mh.one('click',function()
    {
       mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    });
  }

Answer 4

我希望您正在尋找只能在第一次使用的點擊功能'

因為你可以接受一個全局變量

var count = 0;
mh.click(function()
{
++count;
if(count>=1)
{
    return ;
}
 mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");

}）;

Answer 5

您的代碼有一些問題。 嘗試這個：

 $(document).ready(function() { var temp1 = 1.0, temp2, macheps; do { macheps = temp1 temp1 /= 2 temp2 = 1.0 + temp1 } while (temp2 > 1.0) var mh = $('#macheps-holder'); mh.click(function(e) { mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>"); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="macheps-holder"> <p>Click here to see your browser's machine epsilon!</p> </div> 

Answer 6

像這樣簡單地做

 function DoThisClick() { //logic for clicking $("#yourbuttonid").unbind("click"); } $("#yourbuttonid").bind("click",Dothis());