如何让页面上的所有链接在点击时播放声音?

时间:2014-02-24 06:02:04

标签: javascript html css

我有一个包含大量链接的页面,而不是插入

onclick="clicksound.playclip()"

进入每一个,是否有一种方法可以让页面上的所有链接只在一个区域的页面上使用该代码?

2 个答案:

答案 0 :(得分:1)

如果通过“链接”表示所有anchors

可以使用jQuery完成:

$(document).ready(function() {
  $("a").click(function() {
    clicksound.playclip()
  });
});

或纯javaScript:

document.links.addEventListener("click", clicksound.playclip);

答案 1 :(得分:1)

向正文添加一个侦听器,查看是否有来自链接的点击,如果有,则播放声音。您还可以使用 document.links 获取所有链接并为每个链接添加一个侦听器,但这似乎效率低下。

请注意,并非所有A元素都是链接。

修改

这是一个简单的JS解决方案, upTo 和监听器附件部分应该在你的库中:

function upTo(root, tagName) {  
  tagName = tagName.toLowerCase();
  do {
    root = root.parentNode;
    if (root.tagName.toLowerCase() == tagName) {
      return root;
    }
  } while (root.parentNode && root.parentNode.tagName)
}

function playSound(evt) {
  var evt = evt || window.event;
  var tgt = evt.target || evt.srcElement;
  if (tgt && tgt.nodeType != 1) tgt = tgt.parentNode;
  tgt = tgt.tagName.toLowerCase() == 'a'? tgt : upTo(tgt, 'a');
  if (tgt && tgt.href && tgt.href != '') annoyUserWithSound();
}

window.onload = function() {
  if (document.body.addEventListener) {
    document.body.addEventListener('click', playSound, false);
  } else if (document.body.attachEvent) {
    document.body.attachEvent('onclick', playSound);
  }
}

function annoyUserWithSound(){
  console.log('be annoyed by sound…');
}