限制 <a href> 点击功能答案

【问题标题】：Limiting <a href> click function限制 <a href> 点击功能
【发布时间】：2015-10-29 23:10:51
【问题描述】：

我有以下设置，当单击 div 时，它会弹出一个基于此的弹出容器 (https://github.com/vast-engineering/jquery-popup-overlay)

<div class="outer my_popup_open">
    Main content                  
</div>
<div id="my_popup" style="display:none;">                   
    <div class="Popup content">
        Popup content           
    </div>                  
</div>
<script>
    jQuery('#my_popup').popup({             
        })              
</script>

无论如何，我正在尝试将 outer div 容器包装在如下锚点中：

<a href="example.com/go_here">     
  <div class="outer my_popup_open">
    Main content                  
  </div>
</a>

这是两难境地。

我想在拥有“右键单击：在新选项卡中打开链接”选项时保持弹出功能。

这就是我的意思。

因此，如果用户左键单击 div，它将按应有的方式弹出 popupplayover。但是，如果用户右键单击 div，则可以选择“在新选项卡中打开链接”，这样他们就可以选择这样做。换句话说，如果有意义的话，我想防止使用鼠标左键单击锚点，从而使弹出窗口正常运行。

有没有办法限制左键点击功能，使其不点击“锚链接”？

谢谢

【问题讨论】：

标签： jquery html

【解决方案1】：

停止默认事件是好的。但是，在您的情况下，您需要在两次不同的点击中启用不同的行为，并且每次点击后您都需要重新设置行为。所以，我猜你正在寻找这样的东西。

HTML:

<html>
	<head>
		<Title>My Test Document</title>
	</head>
	<style type="text/css">
		a {color:black;}      /* unvisited link */
		a:visited {color:black;}  /* visited link */
		a:hover {color:black;}  /* mouse over link */
		a:active {color:black;}
	</style>
	<body>
		<a id="main_div" style="text-decoration:none;">Tushar</a>
		<div id="pop_up" style="display:none;">
				this is pop up.
		</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	$('#main_div').mousedown(function(event) {
		switch (event.which) {
			case 1:
				alert('Left Mouse button pressed.');
				$(this).attr('href','');
				$('#pop_up').toggle();
				break;
			case 2:
				alert('Middle Mouse button pressed.');
				$(this).attr('href','');
				break;
			case 3:
				$(this).attr('href','https://www.google.com');
				break;
			default:
				$(this).attr('href','');
				alert('You have a strange Mouse!');
		}	
	});              
</script> 
</html>

【讨论】：

这真的很有趣。现在我明白了这个概念。我要试一试 =) 谢谢！
嗯，这很有趣。我只是将 div 包裹在锚点中。现在，看起来 jQuery 函数实际上禁用了默认的锚点单击并属于弹出函数。无论如何，我会牢记这种方法并在将来使用它。谢谢！ =)

【解决方案2】：

你应该阻止默认的点击动作：

jQuery('a').on('click', function(e) {
    e.preventDefault();
    // whatever you want to do here
});

变量e 是事件，函数preventDefault() 确保它不会将点击函数传递给浏览器，而是只执行您在侦听器函数中包装的任何代码。

当然还要为锚点添加一个类或 id，否则页面上的每个链接都会监听该函数；）

【讨论】：

嗯，我明白了。我要试一试。 =) 谢谢
感谢您的精彩解释！ :)
我会记住这个方法，以后会用到。谢谢！ =)