Mousedown內部的點擊問題

我有多個按鈕可以通過 mousedown/touchstart 單擊，2 秒后，您會看到一個彈出視窗，您可以單擊“是”或“否”。

當您單擊一個，然后選擇“否”并單擊另一個時會出現問題。記錄“data-id”時，點擊的第一個是通過的，而不是點擊的。

我認為這是一個event.preventDefault(), event.stopImmediatePropagation問題，但這根本沒有幫助我，我不知道還有什么可嘗試的，也不知道為什么會發生這種情況。

這是JS檔案的預覽：

$('.btn').on('mousedown touchstart', function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    let button = $(this);
    console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
    
    timer = setTimeout(async function() {
    $('#make-sure-location').show();
    
    $('#not-in').on('click', function(e) {
      console.log('not in location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
      $('#make-sure-location').hide();
      clearTimeout();
    });

    $('#inside').on('click', function(e) {
      console.log('on location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
    });
    
  }, 2000)
})

這是一個有效的 fddle：https ://jsfiddle.net/rj8ofLym/28/

要重新創建問題：

1. MouseDown 第一個按鈕
2. 在 div 上單擊“否”。
3. 檢查日志（正確的“資料 ID”）
4. MouseDown 第二個按鈕
5. 在 div 上單擊“否”。
6. 檢查日志（不正確的“資料 ID” - 仍然是第一個）

uj5u.com熱心網友回復：

問題是您將新的點擊事件系結到#inside和#not-in每次.btn點擊。添加e.preventDefault()和e.stopImmediatePropogation()呼叫只是掩蓋了這種行為。您可以通過click在系結新事件之前洗掉所有先前事件來解決此問題。

$('.btn').on('mousedown touchstart', function (e) {
    let button = $(this);
    console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
    
    timer = setTimeout(async function() {
    $('#make-sure-location').show();
    
    $('#not-in').off('click').on('click', function(e) {
      console.log('not in location: ', button.attr('data-treatment-id'));
      $('#make-sure-location').hide();
      clearTimeout();
    });

    $('#inside').off('click').on('click', function(e) {
      console.log('on location: ', button.attr('data-treatment-id'));
    });
    
  }, 2000)
})

button {
      font-size: 12px;
    width: initial;
    height: initial;
    padding: 5px 14px;
    font-weight: 500;
    margin: 10px auto 0;
    
    background: transparent;
    box-shadow: inset 0 0 0 1px #46a4fb;
    z-index: 0;
    -webkit-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -moz-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -o-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -ms-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    color: #46a4fb;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

#make-sure-location {
  background-color: lightgray;
  margin-top: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-treatment-id=1>
Hey, click me to use me!
</button>

<button class="btn" data-treatment-id=2>
Hey, click me to use me!
</button>

  <div id="make-sure-location" class="popup" style="padding: 30px;">
    <p class="tooltips-p" style="margin-top: 0;margin-bottom: 14px;">Make sure you're at the front desk.</p>
    <div>
      <button id="inside">Yes!</button>
      <button id="not-in" style=" background: transparent; color: #646464; margin: 0 auto; padding: 0; text-decoration: underline;">No.</button>
    </div>
  </div>

標籤：javascript 查询

上一篇：JQuery平滑滾動-這可以簡化嗎？

下一篇：如何根據按鈕樣式更改Bootstrap5工具提示顏色？