Usin jQuery如何使元素只能单击一次？

Question

我的JS文件中包含以下代码：-

var $html = $('<div class="chat self" style="justify-content: flex-end;">' +
                '<p class="chat-message" style="cursor: pointer;">' +
                       'message' +
                '</p>' +
              '</div>'
            );
 $html.find('p').click(() => cast_vote(url, option_position, vote_count));

单击元素时，始终会调用click函数。 如何使元素仅被单击一次？

Answer 1

使用jQuery的one()处理程序。根据API，“ .one()方法与.on()相同，除了给定元素和事件类型的处理程序在首次调用后未绑定。”

您正在使用click()，它是.on( "click", handler )的简写。将您的代码更改为：

$html.find('p').one('click', () => cast_vote(url, option_position, vote_count));

Answer 2

您可以在单击的元素上添加一个类似“禁用”的类，然后在再次运行cast_vote函数之前检查该元素是否具有该标记。

Answer 3

您可以在元素上单击后添加一个类，并检查每次单击其中一个元素是否具有该类。

下面的示例向您展示了如何执行此操作。

---

演示

// Add click event to wrapping .message_box
$(".message_box").on("click", ".message", function() {

  // Check if the clicked message has the clicked class
  // If it doesnt, run script
  if (!$(this).hasClass("clicked")) {

    // Add clicked class to message
    // This means no further click events will run the code below
    $(this).addClass("clicked");
    console.log("Clicked");

  }

});

.message {
  padding: 4px;
  border: 1px solid grey;
  border-radius: 4px;
  width: auto;
  clear: both;
  margin: 4px;
}

.clicked {
  border-left-color: blue;
}

.user1 {
  float: left;
}

.user2 {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message_box">
  <div class="message user1">
    Hello
  </div>
  <div class="message user2">
    Hi!
  </div>
  <div class="message user1">
    How are you?
  </div>
  <div class="message user2">
    Good thanks
  </div>
  <div class="message user2">
    and you?
  </div>

</div>