我有下面的代碼來處理兩個不同的事件。一個正常的左鍵和按住左鍵點擊：
- 當用戶進行正常點擊時，數字加起來為一。
- 當用戶按住左鍵單擊時，數字將在用戶按住滑鼠時相加，并在滑鼠向上時停止。
同樣在這兩個事件中，我通過 AJAX 發送結果編號并將其保存在資料庫中。
$(document).ready(function() {
// Normal Click Event
$('.counter').click(function() {
var GetNumber = parseInt($(this).text());
$(this).text(GetNumber 1);
console.log('Left Click Done!');
// AJAX
// ...
});
// Hold Click Event
var ClickStatus = false;
$('.counter').mousedown(function(){
var Element = $(this);
var GetNumber = parseInt(Element.text());
ClickStatus = true;
window.TimeOut = setInterval(function(){
Element.text(GetNumber );
}, 300);
return false;
});
$('.counter').on('mouseup mouseout',function(){
if (ClickStatus){
clearInterval(window.TimeOut);
console.log('Hold Left Click Done!');
// AJAX
// ...
ClickStatus = false;
return false;
}
});
}); .counter {
width: 50px;
height: 50px;
background-color: #1000ff;
border-radius: 5px;
border: 0;
text-align: center;
color: #ffffff;
font-size: 24px;
}
.counter:hover {
opacity: 0.7;
cursor: pointer;
}
p {
font-family: tahoma;
font-size: 12px;
margin-top: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter" title="Left Click / Hold Left Click">1</button>
<p>Click On Above Button, Or Hold Left Click To See The Result.</p>問題是這兩個事件同時觸發！我不想要它，我只需要一次觸發其中一個，這意味著我需要單獨運行這些事件。
此外，我已經嘗試了一些解決方案，如return false，e.stopPropagation()，e.stopImmediatePropagation()，e.preventDefault()＆...，閱讀論壇上相同的主題：
- 在 mouseup 事件處理程式中取消單擊事件
- Jquery mousedown/mouseup 防止點擊
但不幸的是，他們都沒有為我作業，我找不到任何有用的東西。我很困惑，不知道。
請幫我解決這個問題。
uj5u.com熱心網友回復：
您不需要單獨的點擊功能，您可以使用 mousedown 和 mouseup 進行管理。
$(document).ready(function() {
// Click Event
let ClickStatus = false;
let interval, element
$('.counter').mousedown(function() {
ClickStatus = true;
element = $(this)
increment(element)
interval = setInterval(function() {
increment(element)
}, 300);
}).on('mouseup mouseout', function() {
if (ClickStatus) {
clearInterval(interval);
console.log('Hold Left Click Done!');
// AJAX
// ...
ClickStatus = false;
}
});
});
function increment(el) {
el.text(Number(el.text()) 1);
}.counter {
width: 50px;
height: 50px;
background-color: #1000ff;
border-radius: 5px;
border: 0;
text-align: center;
color: #ffffff;
font-size: 24px;
}
.counter:hover {
opacity: 0.7;
cursor: pointer;
}
p {
font-family: tahoma;
font-size: 12px;
margin-top: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter" title="Left Click / Hold Left Click">1</button>
<p>Click On Above Button, Or Hold Left Click To See The Result.</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/384248.html
標籤：javascript 查询