點擊圖片的功能應該是隻爲圖像的父母

我有一個圖片庫的東西，當你點擊一個圖像，它打開全屏幕的圖像。有點像Facebook的劇院模式。我有它，所以當你點擊圖像容器時，它隱藏了容器和圖像。問題是，當我點擊圖像時，甚至也會引發火災。我不想那樣。點擊圖片的功能應該是隻爲圖像的父母

這裏是我的代碼：

$("section ul li img").on("click", function() { 
    $(this).addClass("clicked"); 

    var image_src = $("section ul li img.clicked").prop("src"); 

    $("div.image-full").css({ 
     "visibility": "visible", 
     "display": "block" 
    }); 

    $("div.image-full img").prop("src", image_src); 
}); 

$("div.image-full").on("click", function() { 
    if($("div.image-full").css("cursor") == "pointer") { 
     $("section ul li img.clicked").removeClass("clicked"); 

     var image_src; 

     $("div.image-full").css({ 
      "visibility": "hidden", 
      "display": "none" 
     }); 

     $("div.image-full img").prop("src", ""); 
    } 
});

我試圖使它所以如果當我點擊光標是它隱藏了容器和圖像的指針，但是當它只是一個普通的指針沒有火災。但那並不奏效。

來源

2014-09-27 Jordan

您需要通過對事件

$("div.image-full img").click(function(event){ 
    event.stopPropagation(); 
})

來源

2014-09-27 03:56:03

這很好。太簡單了。 – Jordan 2014-09-27 04:02:27

-1

我想你很困惑什麼css pointer:cursor;意味着，因爲這只是一種風格。

如果您嘗試捕獲懸停事件，請考慮使用$.hover()來代替。我從來沒有見過有人試圖檢查我生命中的CSS指針。

來源

2014-09-27 03:52:38

這只是一個嘗試。沒有其他東西似乎工作，所以我只是試了一下。 – Jordan 2014-09-27 03:59:32

雖然這篇文章對問題作者很有用，但這不是一個答案。您應該將其作爲評論發佈。 – teynon 2014-09-27 04:04:27

-2

改變這一行調用stopPropagation停止從圖像到其父母的單擊事件的傳播：

$("div.image-full").on("click", function() {

到

$("div.image-full").click(function() {

來源

2014-09-27 03:57:23

你可以使用'on'來設置一個事件監聽器，這兩個行都做同樣的事情。 – 2014-09-27 04:01:19

任何一個都沒有區別。 – Jordan 2014-09-27 04:01:56

這個答案也與asker問題中的問題無關，這就是該事件冒泡DOM樹。 – teynon 2014-09-27 04:02:46

點擊圖片的功能應該是隻爲圖像的父母

回答

相關問題