Не работает onclick правильно в хромированном

Question

Первая кнопка onclick работает, но если onclick установлен в stopChrono() вместо chrono(), то stopChrono() не работает. Это происходит только в Chrome, потому что в Mozilla и Edge работает отлично.

Это код сети: https://jsbin.com/mononohute/edit?html,js,output

P.S: Это сообщение не то же самое, как и другие «OnClick не работает в Chrome», потому что circunstances полностью Diferent.

Answer 1

Я переделал обработчик события щелчка.

$('#start').on('click', function(e) { 
    $(this).attr('value', function(_, text) { 
    if (text === 'Stop!') { 
     $(this).attr('class', 'w3-btn w3-green'); 
     stopChrono(); 
     return 'Start!'; 
    } else { 
     $(this).attr('class', 'w3-btn w3-red'); 
     chrono(); 
     return 'Stop!'; 
    } 
    }); 
}); 

В то время как оригинал был такой:

$('#start').on('click', function(e) { 
    $(this).attr('value', function(_, text) { 
    $(this).attr("class", "w3-btn w3-red") 
    return text === 'Stop!' ? 'Start!' : 'Stop!'; 
    }) 
    if ($(this).attr('onclick') == 'chrono()') { 
    $(this).attr('onclick', 'stopChrono()') 
    } else { 
    $(this).attr('onclick', 'chrono()') 
    $(this).attr('class', 'w3-btn w3-green') 
    } 
}); 

Он работает в настоящее время. Я удалил обработчик html onclick, потому что еще chrono() выстрелил дважды.

var start = document.getElementById('start'), 
 
    reset = document.getElementById('reset'), 
 
    counter = document.getElementById('counter'), 
 
    sCounter = 0, 
 
    mCounter = 0, 
 
    hCounter = 0, 
 
    displayChrono = function() { 
 
    if (sCounter < 10) { 
 
     sCounter = "0" + sCounter; 
 
    } 
 

 
    if (mCounter < 10) { 
 
     mCounter = "0" + mCounter; 
 
    } 
 

 
    if (hCounter < 10) { 
 
     hCounter = "0" + hCounter; 
 
    } 
 
    counter.value = hCounter + ":" + mCounter + ":" + sCounter; 
 
    }, 
 
    chronometer, 
 
    openchrono = document.getElementById('openchrono'), 
 
    chronowinin = document.getElementById('chronowinin'); 
 

 

 
function chrono() { 
 
    chronometer = setInterval(function() { 
 
    mCounter = +mCounter; 
 
    hCounter = +hCounter; 
 
    sCounter = +sCounter; 
 
    sCounter++; 
 
    if (sCounter == 60) { 
 
     mCounter++; 
 
     sCounter = 0; 
 
    } 
 

 
    displayChrono(); 
 
    }, 1000); 
 
} 
 

 
function resetChrono() { 
 
    sCounter = 0; 
 
    mCounter = 0; 
 
    hCounter = 0; 
 
    displayChrono(); 
 
} 
 

 
function stopChrono() { 
 
    clearInterval(chronometer); 
 
} 
 

 

 

 
$('#openchrono').click(function() { 
 
    if ($(this).attr('value') == '+') { 
 
    $(this).attr('value', '-'); 
 
    $('#chronowinin').slideDown(); 
 
    } else { 
 
    $(this).attr('value', '+'); 
 
    $('#chronowinin').slideUp(); 
 
    } 
 
}); 
 

 
$('#start').on('click', function(e) { 
 
    $(this).attr('value', function(_, text) { 
 
    if (text === 'Stop!') { 
 
     $(this).attr('class', 'w3-btn w3-green'); 
 
     stopChrono(); 
 
     return 'Start!'; 
 
    } else { 
 
     $(this).attr("class", "w3-btn w3-red"); 
 
     chrono(); 
 
     return 'Stop!'; 
 
    } 
 

 
    }); 
 
}); 
 

 
// 
 
// $('#start').click(function() { 
 
//  if ($(this).attr('value') == 'Start!') { 
 
//   $(this).attr('value', 'Stop!'); 
 
//   $(this).attr('class', 'w3-btn w3-red') 
 
//   $('#start').click(stopChrono()); 
 
//  }}); 
 

 
//else { 
 
//   $(this).attr('value', 'Start!'); 
 
//   $(this).attr('class', 'w3-btn w3-green'); 
 
//   $('#start').click(stopChrono() 
 
//   // function() { 
 
//   // function stopChrono() { 
 
//   // clearInterval(chronometer); 
 
//   // } 
 
//  //} 
 
// ); 
 
// }}); 
 
// 
 
// 
 

 

 
// openchrono.addEventListener("click", function() { 
 
// chronowinin.className = "w3-container w3-row"; 
 
// openchrono.innerHTML = "-"; 
 
// openchrono.id = "closechrono" 
 
// 
 
// closechrono.addEventListener("click", function() { 
 
// var closechrono =  document.getElementById('closechrono'); 
 
// chronowinin.className = "w3-container w3-row hidden"; 
 
// openchrono.innerHTML = "+"; 
 
// closechrono.id = "openchrono" 
 
// }); 
 
// }); 
 
//)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Everything - everything you'll want is here.</title> 
 

 
</head> 
 

 
<body> 
 
    <div class="w3-row w3-container"> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    <div class="w3-col m6 w3-center w3-text-white w3-xxlarge"> 
 
     <p> 
 
     <i>Everything you want is here.</i> 
 
     </p> 
 
    </div> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <div id="chronowin" class="w3-container w3-row"> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover"> 
 
     <p> 
 
     Chronometer 
 
     <input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input> 
 
     </p> 
 
    </div> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <div id="chronowinin" class="w3-container w3-row" style="display: none"> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    <div class="w3-col s 12 m6 w3-center w3-white w3-text-grey"> 
 
     <p></p> 
 
     <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center"> 
 
     <br> 
 
     <p></p> 
 
     <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green"> 
 
     <!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> --> 
 
     <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()"> 
 
     <p></p> 
 
    </div> 
 
    <div class="w3-col m3 w3-text-red"> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <script src="js/jquery.js" charset="utf-8"></script> 
 
    <script src="js/chronometer.js" charset="utf-8"></script> 
 
</body> 
 

 
</html>

Answer 2

JQuery удобно хранит слушатель событий, так что если вы определяете их в отдельных функциях, вы можете легко удалить их:

function stopChrono() { 
    clearInterval(chronometer); 
    $(this).attr('class', 'w3-btn w3-green') 
    $('#start').off('click', stopChrono) 
    $('#start').on('click', startChrono) 
} 

function startChrono(e) { 
    $(this).attr('value', function (_, text) { 
     $(this).attr("class", "w3-btn w3-red") 
     return text === 'Stop!' ? 'Start!' : 'Stop!'; 
    }) 
    $('#start').off('click', startChrono) 
    $('#start').on('click', stopChrono) 
} 

$('#start').on('click', startCrono); 

После хронографа запускается, я удалил «нажмите кнопку» слушатель событий, потому что на следующий клик не следует начинать хронограф. Я также добавил прослушиватель событий stopChrono 'click', потому что он должен остановить хронограф.

Обратное верно для stopChrono(): прослушиватель 'click' отключен от stopChrono и снова подключен к startChrono.

Теперь вы должны быть в состоянии идти туда и обратно.