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)" %>