检测点击 img 元素

Question

<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').addEventListener 'click', ((event) ->
  console.log event
), false

...但事件不会触发。 如何检测点击事件？

Answer 1

我建议你使用.on("click")而不是.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>

Answer 2

您可以按如下方式使用 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>