如何跟踪每个单击项之前是否已被单击(或其第一次单击)
如何跟踪每个单击项之前是否已被单击(或其第一次单击)
提问于 2021-09-12 12:04:08
我有一个问题，让第一次点击每一个链接，我尝试了一次点击事件.one()，但由于我是防止默认情况下，它会导致重定向。如果单击的项目等于1，我希望得到添加的内容，如果每个链接单击的次数超过一次，则删除。
// $('.menu>li>a').one('click', function(e){});
let clickCount = 0;
$('.menu>li>a').on('click', function(e) {
clickCount++;
let $this = $(this);
if (clickCount == 1) {
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-12 14:25:57
尝试使用jQuery数据存储来了解以前是否单击过链接。这将使您能够单独跟踪每个链接：
// $('.menu>li>a').one('click', function(e){});
$('.menu>li>a').on('click', function(e) {
let $this = $(this);
const firstClick = !$this.data('clickedBefore');
if (firstClick) {
$this.data('clickedBefore', true)
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>
更新：
如果不使用数据(“clickedBefore”，true)和添加类来实现相同的结果，还有其他的选择吗？
是。一般来说，如果您只需要一些控制属性，那么使用data比添加类更干净。但是，如果您打算对元素进行样式化，或者如果您的项目已经在其他地方使用类作为控件(因此保持一致性很重要)，那么使用它们是有意义的：
// $('.menu>li>a').one('click', function(e){});
$('.menu>li>a').on('click', function(e) {
let $this = $(this);
const firstClick = !$this.hasClass('clicked-before');
if (firstClick) {
$this.addClass('clicked-before');
//show loader
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
e.preventDefault()
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="">content1</a></li>
</ul>
</li>
</ul>
Stack Overflow用户
发布于 2021-09-12 14:01:33
您只需为两个用例添加两个事件侦听器即可。一个用于禁用默认行为，另一个用于要捕获的单击。
let clickCount = 0;
$('.menu > li > a').on('click', function(e) {
console.log('checking click for things');
clickCount++;
let $this = $(this);
if (clickCount === 1) {
console.log('Only the first click will show the loader');
$('.loader').show();
setTimeout(function() {
$('.loader').hide();
}, 5000);
$this.next('.dropdown').addClass('active');
} else {
$this.next('.dropdown').addClass('active');
}
});
$('.menu > li > a').on('click', function(e) {
e.preventDefault();
console.log('All clicks will prevent default');
});.loader {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li><a href="">item1</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
<li><a href="">item2</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
<li><a href="">item3</a>
<ul class="dropdown">
<li><a href="#">content1</a></li>
</ul>
</li>
</ul>
<div class="loader">Loader</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69154826
复制相关文章
相似问题
腾讯云开发者
