Javascript 仅在文本链接上触发脚本，而不是span

第一篇帖子，让我放松点

我有一个脚本，当点击一些链接的文本时，它会打开一个弹出窗口，但是现在我想去掉文本，只使用一个带有背景img的空白范围作为链接。不用说，这个脚本不会只在span上工作，我希望能得到一些关于如何修改它以使其工作的建议（或者如果它不能在空span上工作，建议任何解决方法）

当前链接结构（使用文本链接触发包含link.com的js窗口）：

所需的链接结构（没有文本，只有带bg img的空白跨度）：

当前脚本：

function popWin() {

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else {
        element.attachEvent("on" + eventName, callback);
    }
}
function init() {
    var links = document.querySelectorAll('a.pop');
    for (var i = 0; i < links.length; i++) {
        popWin.addEvent(links[i], 'click', popWin.popup)
    }
}
function openPopup(e) {
    var top = (screen.availHeight - 500) / 2;
    var left = (screen.availWidth - 500) / 2;
    var e = (e ? e : window.event);
    var target = (e.target ? e.target : e.srcElement);

    var popup = window.open(
        target.href, 
        'social',
        'width=550,height=420,left='+ left +',top='+ top +',location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1'
    );
    if(popup) {
        popup.focus();
        e.preventDefault();
        return false;
    }
    return true;
}
return {
    init: init,
    popup: openPopup,
    addEvent: addEvent
}}
var popWin = new popWin();
popWin.addEvent(window, 'load', popWin.init)

函数popWin（）{
函数addEvent（元素、事件名、回调）{
if（element.addEventListener）{
元素addEventListener（eventName，回调，false）；
}否则{
元素attachEvent（“on”+eventName，回调）；
}
}
函数init（）{
var links=document.querySelectorAll（'a.pop'）；
对于（变量i=0；i

---

我的直觉是使用.nodeName以某种方式将span标记定义为目标。谢谢你的帮助

您可以使用

模拟不可见文本，从而使跨度变宽。

您的跨度当前为空。给它添加一些内容，它就会对你有用

<span>Content</span>

现在再试一次。用我的小提琴吧，它很好地利用了你的例子，而且它可以点击无文本的跨度

此外，代码中没有任何单击处理程序

<span onclick="popWin()">

这将启用单击事件

---

好的，我想我已经找到了解决方案，但我很好奇这是否是一个防爆炸的解决方案（似乎在我迄今为止尝试过的几个浏览器中都能工作）

更改了行：

  var target = (e.target ? e.target : e.srcElement)

致：

---

现在span标记正在触发脚本，而不需要a标记中的任何文本

为什么要使用两个不同的元素捕捉同一事件？去掉并将文本放在span中，捕获click事件并用图像替换span.innerHTML属性。我的目标是在该span中根本没有任何文本。我只是将跨度用作图像位置，设置其宽度和高度，并定义其背景图像。因此，我想尝试使用span标记来触发js，而不是任何文本。那么，为什么不使用img标记呢？在这里，跨度似乎是多余的。你所需要的只是

，或者我误解了你的意图了吗？如果

target=“\u blank”

无法执行您想要的操作，则只需在

标记上捕获

onclick

事件。可能我没有说清楚。。。我希望跨度是一个没有任何文本的图像（使用背景属性）。换句话说，我需要在无文本元素上触发单击。我编辑了这个问题以突出显示它。@Word傻瓜，现在看看。我的跨度已经用宽度和高度定义了，但是js仍然不起作用。下面是我使用的跨度样式：“宽度：32px；高度：32px；显示：内联块；背景图片：url（“../img/sprite.png”）；背景重复：无重复；垂直对齐：中间；'然后只需添加此代码，

您没有任何单击处理程序。已经尝试过了，但单击范围仍会打开一个空白的弹出窗口。如果我在跨距后单击链接文本，弹出窗口将被填充，但如果我单击跨距本身，窗口将为空白。尝试了这一点，尽管它确实打开了弹出窗口，但出于某种原因，该窗口为空（href未被解析）。

span {
   /* change the display property of span; default is inline */
   display: inline-block;
   /* because width and height can be applied to only block level elements */
   width: 100px;
   height: 100px;
}

<span onclick="popWin()">

  var target = (e.target ? e.target : e.srcElement)

  var target = (e.target ? e.target : e.srcElement).parentNode;