檢測用戶點擊與jquery .click（）

Question

所以我在頁面上有一些<a href="..標記，它們具有一個內聯onclick屬性。如果用戶單擊一個並且未登錄，則會提示他們登錄，然后在頁面上刷新jquery在<a>元素上觸發.click() ，將用戶帶到他們最初想去的地方。

由於彈出窗口阻止程序的問題，我將其放置到如果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並嘗試僅在firefox中使用沒有運氣的event ，我正在檢查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中不起作用。
您對於那里的所有主要瀏覽器都應該沒事，但是如果您出於安全考慮，請在檢查ex之前將此行添加到函數中：

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

Answer 2

關於使用不引人注意的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 ）