Каков наилучший способ отключить событие щелчка от

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

В первой ready функции JQuery не является правильным. Вы должны пропускать 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 
 
})

Вы можете прочитать больше о on и off функции JQuery.

Answer 2

Что вы сделали, не делает то, что, по вашему мнению, делает ... В каждом клике будет выполнен первый обработчик кликов, который сбросит 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>"); 
    }); 
}) 

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

я надеюсь, что у ищете функции мыши, чтобы работать только первый раз "

для этого и может принять глобальную переменную

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());