当前位置: 首页 > 面试题库 >

如何模拟对锚标记的点击?

微生运浩
2023-03-14
问题内容

我想模拟对锚标签的点击,并带有所有类似正确目标处理之类的功能。

锚点的DOM对象似乎有一个[[click()] [3]“方法,但并非所有浏览器都支持。Firefox抛出此错误:

错误:anchorObj.click不是函数

它在Opera
10和Konqueror上也很奇怪,当在周围div的onclick处理函数中调用它时,会导致无限点击。我猜只有IE8可以正常工作。无论如何,我都不想要它,因为主要的浏览器大多存在问题。

我在Mozilla论坛中找到了Firefox的另一种解决方案:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt);

对我来说,这似乎太丑陋且麻烦。我不知道它的兼容性如何,我想尽可能避免编写特定于浏览器的代码。

我不能使用location.href = anchorObj.href; 因为它不处理“目标”属性。我可以根据目标值进行一些硬编码,但我也想避免这种情况。

有建议切换到JQuery,但是我不确定它是否能很好地处理目标属性,因为我以前从未使用过它。


问题答案:

这是一个完整的测试用例,它可以模拟click事件,调用所有附加的处理程序(无论它们是否已附加),维护"target"属性("srcElement"在IE中),像正常事件一样冒泡并模拟IE的递归预防。经过FF
2,Chrome 2.0,Opera 9.10和IE(6)的测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
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.
    }
  }
}
</script>
</head>
<body>

<div onclick="alert('Container clicked')">
  <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
  Fake Click on Normal Link
</button>

<br /><br />

<div onclick="alert('Container clicked')">
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>

</body>
</html>

演示在这里。

通过检查引发模拟点击的事件对象,检查事件的target属性(在传播过程中保持不变),它避免了在非IE浏览器中的递归。

显然IE会在内部进行对其全局event对象的引用。DOM级别2没有定义此类全局变量,因此出于这个原因,模拟器必须传递其的本地副本event



 类似资料:
  • 问题内容: 我在通过jQuery伪造锚点单击时遇到问题:为什么我的thickbox第一次单击输入按钮时出现,但第二次或第三次却没有出现? 这是我的代码: 当我直接单击链接时,它总是起作用,但是如果我尝试通过输入按钮激活thickbox,则它不会起作用。这是在FF。对于Chrome,它似乎每次都能正常工作。有什么提示吗? 尽量避免内联这样的jQuery调用。将脚本标签放在页面顶部以绑定到事件: 编辑

  • 问题内容: 在我的随机测试中,我看到了一种将锚标签放在另一个锚标签内的行为。我做了一个jsfiddle。 但是在开发人员工具中,它看起来有所不同: 我相信我们不能将锚标记放在另一个锚标记内,因为单击内部锚会导致click事件冒泡到父锚标记,这是不允许的。 我的假设正确吗? 问题答案: aHTML语法禁止嵌套元素。HTML规范没有说明原因;他们只是强调规则。 从实际的角度来看,浏览器会在其解析规则中

  • 在我的随机测试中,我看到了一个行为,我把一个锚标签放在另一个锚标签里。我做了一个jsfiddle。 但在开发人员工具中,它似乎有所不同: 我相信我们不能将锚定标记放在另一个锚定标记内,因为单击内部锚定将使单击事件冒泡到父锚定标记,这是不允许的。 我的假设正确吗?

  • 问题内容: 我在Python2中有以下代码段: 我想为其编写一些单元测试。我想知道如何使用它来修补游标和连接变量,以便它们返回伪造的数据集?我已经为单元测试尝试了以下代码段,但无济于事: 但是我似乎收到以下错误: 问题答案: 由于游标是的返回值,因此您只需模拟连接,然后正确配置它。例如,

  • 问题内容: 我目前正在使我的Nintendo Wiimote(实际上是Kinda难过)可以像鼠标一样在计算机上工作。我设法使双节棍的摇杆控件实际上在屏幕上左右移动鼠标!真是令人兴奋。现在我被卡住了。 我想在按A时通过python左/右键单击事物,当我去做搜索时,想到的只是tkinter吗? 所以我的问题是,我该怎么称呼以使python在桌面上左/右单击,并且如果可能的话,也许提供一个代码段? 感谢

  • 我有这个奇怪的问题铬(只在铬)。 我有一个页面与std布局(标题,内容,页脚与左和右边距)。内容部分有一个包含许多锚标记的iframe表单