Link_to Image_tag onclick 失火（Rails + JS）

Question

當我執行以下操作時，我注意到了這種奇怪的行為：

 <%= link_to(image_tag('some_image', class:"some_class", onclick:"someFunction(event)"),some_path) %>

稍后調用event.target; 返回undefined 。 我對此進行了調查，這是因為event是image_tag而不是link_to 。

所以我想我的問題是：為什么會發生這種情況，我該如何預防？

我最終將鏈接和圖像分開，並將onclick放在link_to上（圖像顯然不可點擊，下面有一個丑陋的按鈕，只是好奇是否有辦法解決這個問題。

提前致謝！

Answer 1

事件遍歷 dom 樹，也就是冒泡。 target返回點擊發生的元素。 currentTarget返回附加了處理程序 function 的元素。

<a onclick="clickable(event)" href="#">
  <img src="/assets/sample.jpg">        <!-- if you click `img` -->
</a>

<script type="text/javascript">
  function clickable(event){
    console.log(event.target)           <!-- this will return `img` -->
    console.log(event.currentTarget)    <!-- this will return `a` -->
  }
</script>

<a onclick="clickable(event)" href="#"> <!-- if you click `a` -->
  <img src="/assets/sample.jpg">     
</a>

<script type="text/javascript">
  function clickable(event){
    console.log(event.target)           <!-- this will return `a` -->
    console.log(event.currentTarget)    <!-- this will return `a` -->
  }
</script>

如果您需要獲取鏈接，請確保onclick在鏈接上，然后調用currentTarget 。

Answer 2

這將添加指向圖像的鏈接，並且event.target將是圖像。

<%= link_to image_tag('some_image', class:"some_class"), some_path, onclick: "someFunction(event)" %>