.click（）和實際單擊按鈕之間的區別？ （javascript/jQuery）

Question

我試圖弄清楚這個奇怪的問題，其根源是現場點擊和觸發.click()之間的區別。

我不會深究這個問題的細節，但基本上當你點擊輸入按鈕時它工作正常（有一個onclick事件）。但如果我從其他地方撥打.click()（而不是物理地點擊按鈕），則無法正常工作。

我的問題是 - 有沒有一種方法可以真正複製實際點擊按鈕？

---

編輯

的問題：我打開一個加載PDF內嵌一個新窗口（aspx頁面）。 如果我確實點擊鏈接，窗口打開並且PDF加載。如果我使用.click()，則會打開窗口，並提示我下載PDF文件。我已經通過Adobe Reader設置，瀏覽器設置和有關提示的註冊表設置 - 我知道這些可能是大圖的因素，但現在我擔心爲什麼鼠標點擊和.click之間的行爲（）正在做任何不同的事情。

Answer 1

我用這個功能來真正模擬鼠標點擊：

function clickLink(link) { 
    var cancelled = false; 

    if (document.createEvent) { 
     var event = document.createEvent("MouseEvents"); 
     event.initMouseEvent("click", true, true, window, 
      0, 0, 0, 0, 0, 
      false, false, false, false, 
      0, null); 
     cancelled = !link.dispatchEvent(event); 
    } 
    else if (link.fireEvent) { 
     cancelled = !link.fireEvent("onclick"); 
    } 
} 

Answer 2

閱讀下面，它討論瞭如何繞過這個問題之前，讓我來回答更充分爲什麼你不得不開始與問題：

現代瀏覽器採取基於之類的東西的鼠標按鈕，您點擊鏈接不同的動作，無論你持有移/按Ctrl/Alt鍵，等等。例如，在Chrome中，如果您中途點擊鏈接而不是點擊左鍵，瀏覽器將自動在新標籤中打開該窗口。

當您使用.click()時，jQuery必須對您點擊的「方式」做出假設 - 並且您會得到默認行爲 - 在您的情況下，這不是正確的行爲。您需要以MouseEvents設置的形式向瀏覽器指定「正確」設置，以解決問題。現在

，上的方式進行簡短的討論來解決它：

當您使用jQuery的.click()事件不帶任何參數，這實際上不是「僞造點擊」有問題的元件。相反，根據在http://api.jquery.com/click/ jQuery的文檔：

...當.click()被稱爲不帶參數，它是.trigger快捷方式（「點擊」）

這意味着，當你火$('#div1').click() - 如果'click'事件沒有實際的jQuery處理程序，則將獲得默認處理。所以，請考慮以下兩種情況：

案例1：

<a id='myLink' href='/some/link/'>Click me!</a> 
<script type='text/javascript'> 
    $('#myLink').click(); 
</script> 

在第一個場景中，.click()調用不起任何作用，因爲沒有處理程序。該事件觸發，但沒有什麼可以捕捉並響應 - 因此使用a標籤的默認處理，並且用戶被帶到/some/link/--並且由於您沒有指定哪個鼠標按鈕或任何其他參數，它確實是默認的。

案例2：

<a id='myLink' href='/some/link/'>Click me!</a> 
<script type='text/javascript'> 
    $('#myLink').bind('click', function (ev) { 
     ev.preventDefault(); 
     ev.stopPropagation(); 

     alert('you clicked me!'); 
    }).click(); 
</script> 

在這種情況下，因爲click處理程序創建的，當用戶點擊該鏈接 - 在ev.preventDefault()和ev.stopPropagation()通話將停止默認從發生的歷史處理和警報將被解僱。

但是，在這一點上，您有一個代表MouseEvents的ev對象，並且您可以根據需要更改設置。例如，您可以執行以下操作：

ev.altKey = true; // Held Alt 
ev.button = 1; // Middle Mouse Button 

這些設置將更改處理事件的默認方法。

另類，非jQuery的解決方案

您也可以真正模擬通過調整下面的代碼按鈕單擊。

function fakeClick(event, anchorObj) { 
    if (anchorObj.click) { 
    anchorObj.click() 
    } else if(document.createEvent) { 
    if(event.target !== anchorObj) { 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 
      0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     var allowDefault = anchorObj.dispatchEvent(evt); 
     // you can check allowDefault for false to see if 
     // any handler called evt.preventDefault(). 
     // Firefox will *not* redirect to anchorObj.href 
     // for you. However every other browser will. 
    } 
    } 
} 

（爲了更全面落實，看原帖在：How can I simulate a click to an anchor tag? - 看看所選答案）

這實際上假的瀏覽器，以爲你的鼠標點擊的錨/ SPAN/etc通過以與瀏覽器的默認處理程序相同的方式從頭構建事件 - 除了可以覆蓋某些設置外。然而，我不建議這種方法，因爲它更容易打破跨瀏覽器應用程序，你必須弄清楚所有參數映射到的內容。

Answer 3

$('img').click(function(event){ 
    console.log(event.hasOwnProperty('originalEvent')); // output : true 

    }); 
    $('img').trigger("click",function(event){ 
    console.log(event.hasOwnProperty('originalEvent')); // output : false 

});