Question

I have the following set up which when the div is clicked, it brings up a popup container which is based on this ( 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，那么它将调出popuplayover。但是，如果用户右键单击div，则可以选择“在新选项卡中打开链接”，以便他们可以选择这样做以转到链接。换句话说，如果有意义的话，我想使用鼠标左键单击防止锚点，从而允许弹出窗口正常运行。

有没有办法限制左键单击功能，以便它不会点击“锚链接”？

由于

Answer 1

您应该阻止默认点击操作：

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

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

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

Answer 2

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

HTML：

＆＃13;

<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>

＆＃13;

限制<a href=""> click function

2 个答案: