javascript - 停用点击事件的最佳方法是什么

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，然后添加一个新的空点击处理程序...下一次单击将执行第一个处理程序以及新添加的空白处理程序...因此，在第四次单击时，您将执行第一个处理程序一次，空白处理程序执行 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>");
    });
})