單擊JavaScript中的按鈕

Question

據我對JavaScript的了解非常有限，它可以獲取有關頁面上某些元素（例如，按鈕）的各種信息。 JavaScript可以獲取按鈕的名稱，按鈕的類型，名稱以及其中的文本。 它甚至可以禁用按鈕。 但是它可以模擬點擊按鈕嗎？ 還是只能由用戶完成？

編輯1 （我對以下由Narxx回答的回答）：

這種方式似乎不起作用：

<html>
<head>
<script type="text/javascript">
document.getElementById('my-button').click();
</script>
</head>
<body>
<button id="my-button" onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

編輯2 （我對以下由prash撰寫的評論的回復）

這種方式不工作或者（在模擬功能是通過書面卡加斯 ，通過TweeZz修改，並從我拍這里）：

<html>
<head>
<script type="text/javascript">
function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}
simulate(document.getElementById("btn"), "click");
</script>
</head>
<body>
<button id="btn" onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

編輯3 ：（我對以下由Jonco98回答的回答）：

（ 此代碼也是我的問題的答案 ）

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ClickButton()
{
document.getElementById('my-button').click();
}
</script>
</head>
<body onload="ClickButton()">
<button id="my-button" onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

編輯4：

請注意， naomik給出的以下答案也很好地解決了我的問題。

Answer 1

我建議您這樣做不要打擾。

<button id="my-button">The Time is?</button>

<script type="text/javascript">
  var b = document.getElementById("my-button");

  function displayTime(elem) {
    elem.innerHTML = Date();
  }

  b.addEventListener("click", function(event) {
    displayTime(this);
  });

  // fake the click
  b.dispatchEvent(new Event("click"));
</script>

jsfiddle演示

該按鈕將立即加載並被“模擬事件”“單擊”。 隨后的點擊將導致按鈕時間被更新。

這是另一個例子：

單擊提交后，時間將停止更新

<form id="my-form">
  <input name="time" />
  <input type="submit" />
</form>

<script type="text/javascript">
  var f = document.getElementById("my-form");

  function updateTime() {
    f.time.value = Date();
  }

  var interval = setInterval(updateTime, 1000);

  f.addEventListener("submit", function(event) {
    clearInterval(interval);  
    alert("the submitted time is: " + f.time.value);
    event.preventDefault();
  });

  // prepopulate form
  updateTime();
</script>

參考

Answer 2

是的，您可以使用JavaScript模擬按鈕的點擊：
HTML：

<button id="my-button">Click me</button>

JS：

document.getElementById('my-button').click();

就是這樣...您剛剛在按鈕上觸發了click事件，而沒有實際單擊它:)

Answer 3

好吧，這並不意味着是替代答案。 正如@naomik所建議的那樣，答案已經在那里，我同意這一點。

讓我指出OP面臨的問題，但不清楚為什么他的實際代碼不起作用。

實際代碼：

<html>
   <head>
      <script type="text/javascript">
         document.getElementById('my-button').click();
      </script>
   </head>
   <body>
      <button id="my-button" onclick="this.innerHTML=Date()">The time is?</button>
   </body>
</html>

導致事件不觸發的簡單原因是，當時未繪制<button> ，並且您在控制台中會收到此錯誤。 Cannot read property 'click' of null

在@naomik共享的第一個示例中，這似乎可行。 原因是執行<script>位置。 它不在<head> ，它在<body> ，並且<button>在執行腳本之前首先被繪制。

很好啊

<html>
   <head></head>
   <body>
      <button id="my-button" onclick="this.innerHTML=Date()">The time is?</button>
      <script type="text/javascript">
         document.getElementById('my-button').click();
      </script>
   </body>
</html>

除此之外，建議通過dispatchEvent()和addEventListener()進行此操作以模擬和偵聽事件。

單擊JavaScript中的按鈕

問題描述

3 個解決方案

解決方案1
3 已采納 2014-07-13 17:43:39

解決方案2
1 2014-07-13 15:50:21

解決方案3
1 2014-07-13 18:41:35

單擊JavaScript中的按鈕

問題描述

3 個解決方案

解決方案1 3 已采納 2014-07-13 17:43:39

解決方案2 1 2014-07-13 15:50:21

解決方案3 1 2014-07-13 18:41:35

解決方案1
3 已采納 2014-07-13 17:43:39

解決方案2
1 2014-07-13 15:50:21

解決方案3
1 2014-07-13 18:41:35