jQueryの.off(‘click’)イベントの使い方
31 回閲覧されました
みなさんこんにちは、jonioです。
クリックした時にイベントが発火する「.on(‘click’)」イベントがありますがクリックイベントを無効にする「.off(‘click’)」イベントもあります。
今回は「.off(‘click’)」イベントについてのメモの記事になります。
コードの書き方
向こうにしたいclickイベントと必ず一緒に使います。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div style="background-color : #CCC; padding : 20px 20px 10px;">
<div style="display:inline-flex; align-items:center;">
<input type="button" id="btn1" value="現在日時">
<div id="date"></div>
</div>
<input type="button" id="btn2" value=" off ">
</div>
<script type="text/javascript">
$(function() {
$("#btn1").on("click", function() {
$("#date").html(new Date());
});
});
$(function() {
$("#btn2").on("click", function() {
$("#date").html("");
$("#btn1").off('click');
});
});
</script>「.off(‘click’)」を20行目で使っていますがこれで要素「#btn1」に対するクリックイベントを無効にできます。
.off(‘click’)ではなく.off()にした場合
この書き方をすると要素に紐づく全てのイベントを無効にします。
下記のコードで考えます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div style="background-color : #CCC; padding : 20px 20px 10px;">
<div style="display:inline-flex; align-items:center;">
<input type="button" id="btn1" value="現在日時">
<div id="date"></div>
</div>
<input type="button" id="btn2" value=" off ">
</div>
<script type="text/javascript">
$(function() {
$("#btn1").on("click", function() {
$("#date").html(new Date());
});
});
$(function() {
$("#btn1").on("mouseenter", function() {
$("#date").addClass('flash');
});
});
$(function() {
$("#btn2").on("click", function() {
$("#date").html("");
$("#btn1").off();
});
});
</script>この場合要素$btn1に紐づいているのは13行目〜15行目だけではなく18行目〜20行目もあるのでこれも無効にします。