檢測點擊img元素

-1

<div class="portfolio-item"> 
<div class="hover-bg"> 
    <a href="#"> 
    <div class="hover-text"> 
    <h4>Logo Design</h4> 
    <small>Branding</small> 
    <div class="clearfix"></div> 
    <i class="fa fa-plus"></i> 
    </div> 
    <img src="01.jpg" class="img-responsive ng-isolate-scope"> 
    </a> 
    </div> 
</div> 
</div>

我試圖檢測<img/>元素上的點擊。我有以下聽衆：檢測點擊img元素

$('img').addEventListener 'click', ((event) -> 
    console.log event 
), false

...但事件不會觸發。我如何檢測點擊事件？

來源

2017-01-30 pahan40

'$（ 'IMG'）點擊（函數（）{}） ' – guradio

我還收聽了HTML $（ 'HTML'）上的「點擊」，（事件） - > 的console.log事件當我在控制檯中點擊圖片 - 目標始終是div.hover文本 – pahan40

@ pahan40 [HTTPS： //jsfiddle.net/349zggez/]你在找這樣的事情嗎？ –

我建議你用.on("click")而不是.click()。

$('img').on("click", function() { 
 
    console.log("image clicked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="portfolio-item"> 
 
    <div class="hover-bg"> 
 
    <a href="#"> 
 
     <div class="hover-text"> 
 
     <h4>Logo Design</h4> 
 
     <small>Branding</small> 
 
     <div class="clearfix"></div> 
 
     <i class="fa fa-plus"></i> 
 
     </div> 
 
     <img src="01.jpg" class="img-responsive ng-isolate-scope"> 
 
    </a> 
 
    </div> 
 
</div>

來源

2017-01-30 13:04:03 Syden

我明白了這個問題。問題在於定位hover-bg。它具有絕對的地位，它在於形象。這就是爲什麼點擊它觸發事件的div或div孩子，而不是圖像。當下一個元素的位置是絕對位置時，是否可以檢測圖像點擊？ – pahan40

您可以使用jQuery的單擊事件如下：

$(document).ready(function(){ 
 
    $("img").click(function(){ 
 
     alert("The image was clicked."); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<div class="portfolio-item"> 
 
<div class="hover-bg"> 
 
    <a href="#"> 
 
    <div class="hover-text"> 
 
    <h4>Logo Design</h4> 
 
    <small>Branding</small> 
 
    <div class="clearfix"></div> 
 
    <i class="fa fa-plus"></i> 
 
    </div> 
 
    <img src="http://placehold.it/140x100" class="img-responsive ng-isolate-scope"> 
 
    </a> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-01-30 13:33:50

檢測點擊img元素

回答

相關問題