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() { ... })

第二个。您可以为callback事件创建单独的函数click，并在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的on和off函数的更多信息。

Answer 3

您可以在此处使用.one()，只允许点击一次链接，请参阅下面的代码。

<强> one() API doc

<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

我希望您正在寻找第一次使用点击功能＆＃39;

为此你可以采取全局变量

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

您的代码存在一些问题。试试这个：

＆＃13;

$(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>");
  });

})

＆＃13;

<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>

＆＃13;

Answer 6

以这样的简单方式做到这一点

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

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

6 个答案: