Question

所以我在页面上有一些<a href="..标记，它们具有内联onclick属性。如果用户单击一个并且未登录，则会提示他们登录，然后在页面上刷新jquery将在.click()元素上触发<a>以将用户带到他们最初想要的位置去。

由于弹出窗口阻止程序问题，如果jquery触发.click()，我会在同一个窗口中打开链接。

但是如果用户已经登录，我想点击链接在新标签页中打开。这是我在Chrome中运行良好的代码，但FireFox对此感到生气 - 说'事件未定义'。

 <a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, e)


function genericActionComplete(actionId, ctl, url, markComplete, e) {
    if(event.x != null){   // User Clicked - open url in new tab  
         window.open(url);
    }

    else{    // Click performed by script after logIn , open in same tab to prevent Pop-Up Blocker

     window.location = url;   
    }
}

我尝试传递this和e并尝试使用event但在firefox中没有运气，我正在检查event.x，因为如果用户点击了用鼠标链接。

Answer 1

当然事件是未定义的......传递给函数的最后一个参数是事件，由函数定义中的变量e引用。

function genericActionComplete(actionId, ctl, url, markComplete, e)

但是在HTML中作为参数传递e将不会传递event对象，该对象被称为event。改变

<a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, e)">
<!-- ===================================================================================/\

要

<a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, event)">
<!-- ===================================================================================/\

你应该没事。您的代码处理chrome的原因很简单。为了尽可能兼容和宽容，chrome确实具有window.event属性，就像IE的旧版本一样。由于你的函数的第一行是错误的：

if(event.x != null){//should be e.x

JavaScript的范围扫描将event解析为window.event - 适用于IE和Chrome，而不是FF。
你应该可以在那里使用所有主流浏览器，但是如果你想要安全起见，请在检查e.x之前将此行添加到该功能中：

e = e || window.event || {x: null};

Answer 2

如何使用不引人注目的javascript ？请参阅Difference between obtrusive and unobtrusive javascript和Why is using onClick() in HTML a bad practice?

然后你甚至可以“敢”做其他干净的事情。

不确定如何在vanilla javascript中使用它，但下面是使用jQuery的解决方案。

查看jsbin http://jsbin.com/lidobarenaku/1/edit?html,js,console,output

上的实例

HTML：

<a href="#" class="js-hook-for-link">your link</a>
<br><br>
<div class="programmatical-click-on-link">
If you click on this text, the link "your link" will be programmatically triggered.
</div>

不引人注目的javascript ＆amp; jQuery的：

$('.js-hook-for-link').on('click', function(event, isProgrammaticalClick ){
  event.preventDefault() ; /* link behavior disabled for demo purpose */

  console.log("on click: "+(isProgrammaticalClick || "isHumanAction !" ));

  if ( isProgrammaticalClick ){ /* JS truthy/falsy value usage */
    /* .. do something on programmatical click ... */
    /* window.location = url;  open url in same tab in your case */
  }
  else {
    /* .. do something on human submission ... */
    /* window.open(url); open url in other tab in your case */
  }
});

$('.programmatical-click-on-link').on('click', function(){
  /* programmatically click on link (notice the flag param added) */
  $('.js-hook-for-link').trigger( 'click' , ['isProgrammaticalClick'] );
});

注意：我在这个例子中使用jQuery来“挂钩”类名，但没有什么能阻止你使用普通的javascript或其他javascript选择器库（即http://sizzlejs.com/，https://github.com/ded/qwery等等http://jster.net/category/selector-libraries）

检测用户点击与jquery .click（）

2 个答案: