Javascript 在旧浏览器中执行点击 html "image"

Question

我正在尝试点击 <image>元素。我发现:

[3] Older versions had HTMLInputElement.click(), and HTMLButtonElement.click() only.

有人知道如何通过其他方式触发同一事件吗？

谢谢

编辑:.click() 适用于所有浏览器。但我需要在 Android 的 2.3 浏览器上执行此操作，它给了我:

01-10 21:19:18.375 4786-4786/com.example.victormilazzo.siganotifier E/Web Console: TypeError: Result of expression 'document.getElementById('btnLogin2').click' [undefined] is not a function. at undefined:1

使用下面的代码解决

正如我所说，旧浏览器仅支持输入或按钮元素上的 click() 方法。所以，我尝试了:

function simulateclick(){
    var elem = document.getElementById('btnLogin2');
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, elem);
    elem.dispatchEvent(evt);
}
var btn = document.createElement('BUTTON');
btn.addEventListener('click', simulateclick);
btn.click();

PS.: 'btnLogin2' 是我试图点击的元素的 ID。这是一个<div> .

说明:我刚刚创建了一个按钮并添加了一个模拟点击事件的事件监听器

谢谢大家!

Answer 1

如果您的目标是较旧的浏览器，则只能在输入或按钮元素上附加点击事件。 该问题可以通过使用 css 属性 background-image 设置按钮样式来解决。

• 向按钮添加图像
• 将background-color设置为white
• 将边框设置为无

在代码示例中，您会看到这是如何工作的:

var clickCounter = 0;
var messageBox = document.getElementById("message");

function clickMe() {
  clickCounter++;
  messageBox.innerHTML = "Clicked " + clickCounter + " times";
}

button {
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
  height: 70px;
  width: 70px;
  background-color: white;
  border: none;
}

<button onclick="clickMe()"></button>
<p id="message">Click me</p>

编辑:

如您在 MDN 文档中所见，Android 浏览器不支持点击事件。 click documentation