如何通过中键单击使javascript链接可打开?

时间:2016-12-03 09:52:16

标签: javascript html web

我的网页使用大量数据,这些数据由用户上传,由服务器处理然后返回。有时,用户会希望过滤部分数据,以便服务器只处理该数据的一部分。所以我的网页有一个很好的过滤器'按钮根据客户的状态进行过滤。

长话短说:我的客户希望能够在中间点击该按钮,以便在新标签页中打开。 (有些实际上使用右键单击 - >'在新标签中打开',所以这也必须得到支持)

我是letting the user deciding how to open their links的忠实信徒,因此我不希望此过滤器按钮自动打开新窗口。但我无法将其转换为[a href]链接,因为我需要先运行JS过滤器。

所以问题就变成了,如何在打开之前创建一个运行某些代码的链接?

编辑:下面使用鼠标点击事件的解决方案对于在新标签中使用右键+打开的用户来说会失败,这在我的用户中相当普遍。我已相应更新了问题。

5 个答案:

答案 0 :(得分:0)

您可以使用简单的onclick,然后在JavaScript中使用event.button查看单击了哪个鼠标按钮。这将返回表示鼠标按钮的整数值。 0是标准(通常是左侧)点击,1是鼠标中键(你想要的),2是右键。这也允许重新配置指针设备,因此它将使用已设置的任何键作为鼠标中键而不是在使用物理中键鼠标时触发。

您可以在https://developer.mozilla.org/En/DOM/Event.button

上的event.button上阅读更多内容

编辑:

也许值得使用event.preventDefault()方法,因此它不会在新标签中打开链接(例如)。但是,如果您使用此链接,则必须手动打开链接。

答案 1 :(得分:0)

使用按钮,捕获点击事件,您可以在其中放置过滤器逻辑,然后打开新选项卡。您始终可以使用css使其看起来像按钮或链接样式。

您可以看到this如何使用鼠标中键点击。

答案 2 :(得分:0)

您可以使用javascript来使用以下想法。

<强> HTML:

<a href="javascript:void(0);" onclick="clickMe();">Click Me</a>

<强>使用Javascript:

function clickMe() {

   //Do here whatsever you want
   var test = "test";
   alert(test);

   var link = "mylink/whatsever-query-string";

   /// Use this if you want open link in self window
   // window.location.href = "mylink/whatsever-query-string"; 

   /// Use this if you want open link in new window
   window.open(link, "", 'width=500, height=600, toolbar=no,location=no, resizable=yes,scrollbars=yes, directories=no,status=no, titlebar=no');

   /// Use this if you want open link in new tab
   //  window.open(link, '_blank'); 
 }

DEMO Fiddle

编辑:对于鼠标中间点击,您可以使用以下内容,

<强> HTML

<div onmousedown="WhichButton(event)">ClickMouse</div>

<强> JAVASCRIPT

 function WhichButton(event) {
   var x = event.buttons;
   if (x == 4) {
     var test = "test";
     alert(test);
     window.open('', '_blank');
   }
 }

DEMO

答案 3 :(得分:0)

对于经过此处的任何人,我确实找到了解决方案:我在浏览器的本地存储中保留了所需的所有过滤数据。当用户打开链接时,它会将他重定向到一个页面,该页面知道查看本地存储并在存储的数据上运行逻辑,然后再将其重定向到正确的位置。

这并不理想:如果用户试图通过直接从一个href复制链接来共享链接,那么它就无法在另一个用户的计算机上工作(尽管我可以在这种情况下显示警告)。 但是,如果用户点击该链接然后共享新打开的链接,它就会起作用,所以我将这个解决方案标记为足够好&#39;。

答案 4 :(得分:-1)

你可以试试这个:

$("button").on('mousedown', function(e) {
 if(e.which == 1) {
   //Left button clicked
 }else if(e.which == 2) {
   //Middle button clicked
 } else if(e.which == 3) {
   //Right button clicked
 }
});