Question

首先，我的代码可以在这里找到。

我遇到问题的部分如下。

var changePic = function (direction, id, array) {

    var intID = parseInt(id);
    var intDir = parseInt(direction);
    if (intID > 0) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    } else if (intID == 0 && intDir == 1) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    }
};

我希望此功能执行的操作是将background-image的{{1}}更改为div id=lightbox URL中的array给我的功能。

但是，当我点击侧边栏时，整个<div id=lightbox>会再次被移除，就像我点击了div本身（）而不是侧边栏一样。但是，如果我在alert中放置了function，则表明event已被触发，并且function内部至少执行了一些代码。

我现在假设当我点击侧边栏时，我会触发两个事件，一个会更改background-image，另一个会removes lightbox再次。

有没有办法防止潜在的div来自＆＃34;倾听＆＃34;点击？

另外，如果我错误地使用任何条款或我的发布礼仪已关闭，请纠正我。我是所有这些人的新手，非常感谢有经验的用户提供的意见。

非常感谢。

Answer 1

您必须使用边栏事件中的stopPropagation()停止事件传播：

event.stopPropagation（）：

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

代码：

$(document).on('click', '#leftBar', function (event) {
        event.stopPropagation();
        changePic(-1, currentID, activeArray);
    });

    $(document).on('click', '#rightBar', function (event) {
        event.stopPropagation();
        changePic(1, currentID, activeArray);
    });

更新的FIDDLE：

http://jsfiddle.net/yfukm8kh/3/

您应该阅读Event Bubbling and Propagation

Answer 2

所以你只想解决#lightbox，对吧？不是它里面的东西？
试试这个：

$('body > #lightbox').css("background-image", array[intID].link);

Answer 3

为防止触发#lightbox的点击事件，您可以在左右栏处理程序中使用return false;。
我将#lightbox点击处理程序移出.singapore点击处理程序，以防止多次添加此处理程序。

Updated fiddle

$(document).on('click', '#leftBar', function () {
    changePic(-1, currentID, activeArray);
    return false;
});

$(document).on('click', '#rightBar', function () {
    changePic(1, currentID, activeArray);
    return false;
});

$('.singapore').click(function () {
    currentID = event.target.id;
    openThumbnail(singaporeArray, currentID);
});

$(document).on('click', '#lightbox', function () {
    $(this).remove();
});

通过点击另一个div更改div的背景图像

3 个答案:

event.stopPropagation（）：

代码：

更新的FIDDLE：