检测用户点击vs. jquery .click()

detecting user click vs. jquery .click()

本文关键字：click jquery vs 用户 检测      更新时间：2023-09-26

所以我在一个页面上有一些<a href="..标签，它们有一个内联的onclick属性。如果用户点击其中一个而没有登录，则会提示他们登录，然后在页面刷新时，jquery会在<a>元素上触发.click()，将用户带到他们原来想要去的地方。

因为弹出窗口拦截器的问题，我做了它，如果jquery触发一个.click()我打开链接在同一窗口。

但是如果用户已经登录，我想点击链接打开一个新的选项卡。这是我在Chrome中工作良好的代码，但FireFox对它很生气-说'event is undefined'。

 <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中没有运气，我正在检查事件。X，因为如果用户用鼠标点击链接，它将有一个值。

当然事件是未定义的…传递给函数的最后一个参数是事件，由函数定义中的变量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};

如何使用不引人注目的javascript ?请参阅突兀和非突兀javascript之间的区别以及为什么在HTML中使用onClick()是一种不好的做法?

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

不确定你如何在香草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 &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)

相关文章：