禁用锚标签第一次点击设备，需要工作第二次点击答案

【问题标题】：disable anchor tag first click on devices and need to work second click禁用锚标签第一次点击设备，需要工作第二次点击
【发布时间】：2016-09-07 04:38:08
【问题描述】：

我有一个这样的 DOM。当我第一次在设备上单击锚标记时，我想禁用锚标记。第二次点击它会转到网址，必须感谢好的答案。

$(function(){

var oreintedWidth = $(window).width();
if (oreintedWidth < 1200) {
var $clickLinks = $('.social').find('ul').children('li');
   $($clickLinks).on('click', 'a', function(events){

      $($clickLinks).each(function(index, element) {
         $(this).closest('li').removeClass('selected');
      });
		
      $(this).closest('li').addClass('selected');
      if($(this).closest('li').hasClass('selected')){
         events.preventDefault();
      }else {}   		
   });
}

});

<div class="social">
	<ul>
    	<li><a href="about.html" target="_blank">one</a></li>
        <li><a href="about.html" target="_blank">two</a></li>
        <li><a href="about.html" target="_blank">three</a></li>
    </ul><!-- /.ul -->
</div>

【问题讨论】：

meta.*.com/questions/334673/… 和 meta.*.com/questions/334675/…

标签： javascript jquery html

【解决方案1】：

试试这个，这是你想要的吗？我刚刚添加了一个警报，添加你的代码而不是那个。希望这对你有帮助。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">
a{
	text-decoration: none;
}
</style>

<body>
	

<a href="" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a>

</body>

<script type="text/javascript">
 $(document).ready(function(){
 	var theclick = 0;
 	$(".mylink").click(function(event){
 		if(theclick == 0)
 		{
 			theclick = theclick + 1;
 			event.preventDefault();
 		}
 		else
 		{
          //do your code here
 			alert("Yeh, this is the second time, now I'm working");
 		}
 	});
 });


</script>
</html>

复制粘贴并在浏览器中尝试。

否则，您想在第一次单击时使用 css 显示禁用，这样做。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">
a.mylink{
	text-decoration: none;
}

.adisable{
	color:gray;
	opacity: 0.7;
}

</style>

<body>
	

<a href="" target="_blank" class="mylink">MY LINK, I WILL NOT WORK IN THE FIRST CLICK</a>

</body>

<script type="text/javascript">
 $(document).ready(function(){
 	var theclick = 0;
 	$(".mylink").click(function(event){
 		if(theclick == 0)
 		{
 			theclick = theclick +1;
 			$(this).addClass("adisable");
 			event.preventDefault();
 		}
 		else
 		{
 			alert("Yeh, this is the second time, no I wil work");
 		}
 	});
 });


</script>
</html>

【讨论】：

感谢您帮助我。但这不是我想要的
那么你想要什么
检查我的 DOM，我有 3 个 li，当我单击 a 标签时，将一个类添加到最近的 li.. 以及准备转到 url 的唯一锚
和 3 li 有多个锚点都准备好了当 li 被选中的类。我认为这是一个简单的逻辑。我一直在努力

【解决方案2】：

您可以使用 one() 方法来跟踪第一次点击，然后您可以更改属性或类。在其他点击事件上，您可以检查属性或类是否设置？并根据类或属性集传播事件

$(function(){

var oreintedWidth = $(window).width();
if (oreintedWidth < 1200) {
var $clickLinks = $('.social > ul> li > a ');
	$($clickLinks).one('click', function(e){
      e.preventDefault();
      $(this).attr('first-clicked','1');
      return false;
	});
  
    $($clickLinks).on('click', function(e){
     
     return $(this).attr('first-clicked')=='1';
	});
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="social">
	<ul>
    	<li><a href="about.html" target="_blank" first-clicked='0'>one</a></li>
        <li><a href="about.html" target="_blank" first-clicked='0'>two</a></li>
        <li><a href="about.html" target="_blank" first-clicked='0'>three</a></li>
    </ul><!-- /.ul -->
</div>

【讨论】：

这很好。但是当我单击一个添加属性first-clicked 时，接下来我单击两个也被第一次单击的，然后我到达一个即去链接。那不是我想要的。我得到了答案，我在上面发布了

【解决方案3】：

是的，我明白了。这就是我要找的，谢谢支持

$(function(){

    var oreintedWidth = $(window).width();
    if (oreintedWidth < 1200) {
    var $clickLinks = $('.social').find('ul').children('li');
    	$($clickLinks).find('a').attr('onClick','return false');
    	$($clickLinks).on('click', 'a', function(events){
    		var nearBy = $(this).closest('li');
    		
    		$($clickLinks).each(function(index, element) {
                $(this).removeClass('selected');
    	        $(this).find('a').attr('onClick','return false');
            });
    		
    		nearBy.addClass('selected');
    		if(nearBy.hasClass('selected'))
    		{
    			$(this).attr('onClick',"return true");
    			
    		}
    		else {
    			$(this).attr('onClick','return false');
    			
    		}
    		
    		
    	});
    }
    });

【讨论】：