Question

第一篇文章，所以在我的noobness上轻松一点！

我有一个脚本，当点击一些链接文本时打开一个弹出窗口，但现在我想摆脱文本，只使用带有背景img的空跨度作为链接。毋庸置疑，脚本不会仅仅与跨度一起工作，我会理解如何修改它以使其工作（或建议任何解决方法，如果它不能在空的范围内工作）。

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

<a href="http://thelink.com" class="pop">
<span class="icon_bg"><!-- empty span with image as background --></span>
some text here
</a>

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

<a href="http://thelink.com" class="pop">
<span class="icon_bg"><!-- empty span with image as background --></span>
</a>

当前脚本：

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)

我的预感是以某种方式使用.nodeName将span标记定义为目标。所有帮助赞赏。

Answer 1

您可以使用<span>&nbsp</span>来模拟不可见文本，从而使得范围变宽。

Answer 2

您的范围目前是空的。添加一些内容，然后它将适合你。

<span>Content</span>

现在事件会触发你。

在您拥有跨度的宽度和高度之前，背景图像将不可见。我会推荐你使用

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()">

这将启用点击事件。

http://jsfiddle.net/afzaal_ahmad_zeeshan/FdjZy/

Answer 3

好吧，我想我已经找到了解决方案，但我很好奇这是否会是防弹的（似乎在我迄今为止尝试的几个浏览器中都有效）。

更改了行：

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

要：

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

现在，span标记正在触发脚本，而不需要在a标记内的任何位置添加任何文本。

脚本只在文本链接上触发，而不是跨越

3 个答案: