限制<a href>单击功能

debugcn 发表于 Dev

史蒂夫·金

我有以下设置，当单击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>

无论如何，我正在尝试将outerdiv容器包装在如下所示的锚点中：

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

这是两难选择。

我想在具有“右键单击：在新选项卡中打开链接”选项的同时维护弹出功能。

这就是我的意思。

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

有没有一种方法可以限制左键单击功能，使其不单击“锚链接”？

谢谢

杜沙尔禁令

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。