onclick事件不适用于svg元素

时间:2017-01-01 12:33:20

标签: google-chrome-extension javascript-events

当我尝试创建Chrome扩展程序时,我有以下html和js代码段:

html contents:
<div class="vid-refresh">
    <svg x="0px" y="0px" class="push-right" viewBox="0 0 491.236 491.236" xml:space="preserve" width="20px" height="20px">
    <path d="M55.89,262.818c-3-26-0.5-51.1,6.3-74.3c22.6-77.1,93.5-133.8,177.6-134.8v-50.4c0-2.8,3.5-4.3,5.8-2.6l103.7,76.2    c1.7,1.3,1.7,3.9,0,5.1l-103.6,76.2c-2.4,1.7-5.8,0.2-5.8-2.6v-50.3c-55.3,0.9-102.5,35-122.8,83.2c-7.7,18.2-11.6,38.3-10.5,59.4    c1.5,29,12.4,55.7,29.6,77.3c9.2,11.5,7,28.3-4.9,37c-11.3,8.3-27.1,6-35.8-5C74.19,330.618,59.99,298.218,55.89,262.818z     M355.29,166.018c17.3,21.5,28.2,48.3,29.6,77.3c1.1,21.2-2.9,41.3-10.5,59.4c-20.3,48.2-67.5,82.4-122.8,83.2v-50.3    c0-2.8-3.5-4.3-5.8-2.6l-103.7,76.2c-1.7,1.3-1.7,3.9,0,5.1l103.6,76.2c2.4,1.7,5.8,0.2,5.8-2.6v-50.4    c84.1-0.9,155.1-57.6,177.6-134.8c6.8-23.2,9.2-48.3,6.3-74.3c-4-35.4-18.2-67.8-39.5-94.4c-8.8-11-24.5-13.3-35.8-5    C348.29,137.718,346.09,154.518,355.29,166.018z" fill="#91DC5A"/></svg></div>

js contents :
$(".vid-refresh").eq(0).off('click').click(refreshVideo(this));

首先,我尝试将事件附加到svg el本身。那没起效。所以现在我尝试将其封装在一个div中并尝试将其附加一个未触发的点击事件。但是,无论是首次加载页面的时间,还是使用&#39;这个&#39;来调用refreshVideo方法。是文件。可能是什么原因。

1 个答案:

答案 0 :(得分:0)

请参阅代码段,该代码段应按预期工作。您的版本名为refreshVideo on the load。使用function(){ ... }内的click()语句,只能点击执行。

function refreshVideo(el) {
  console.log(el); 
}

$(".vid-refresh").eq(0).off('click').click(function() {
  refreshVideo(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="vid-refresh">
    <svg x="0px" y="0px" class="push-right" viewBox="0 0 491.236 491.236" xml:space="preserve" width="20px" height="20px">
    <path d="M55.89,262.818c-3-26-0.5-51.1,6.3-74.3c22.6-77.1,93.5-133.8,177.6-134.8v-50.4c0-2.8,3.5-4.3,5.8-2.6l103.7,76.2    c1.7,1.3,1.7,3.9,0,5.1l-103.6,76.2c-2.4,1.7-5.8,0.2-5.8-2.6v-50.3c-55.3,0.9-102.5,35-122.8,83.2c-7.7,18.2-11.6,38.3-10.5,59.4    c1.5,29,12.4,55.7,29.6,77.3c9.2,11.5,7,28.3-4.9,37c-11.3,8.3-27.1,6-35.8-5C74.19,330.618,59.99,298.218,55.89,262.818z     M355.29,166.018c17.3,21.5,28.2,48.3,29.6,77.3c1.1,21.2-2.9,41.3-10.5,59.4c-20.3,48.2-67.5,82.4-122.8,83.2v-50.3    c0-2.8-3.5-4.3-5.8-2.6l-103.7,76.2c-1.7,1.3-1.7,3.9,0,5.1l103.6,76.2c2.4,1.7,5.8,0.2,5.8-2.6v-50.4    c84.1-0.9,155.1-57.6,177.6-134.8c6.8-23.2,9.2-48.3,6.3-74.3c-4-35.4-18.2-67.8-39.5-94.4c-8.8-11-24.5-13.3-35.8-5    C348.29,137.718,346.09,154.518,355.29,166.018z" fill="#91DC5A"/></svg></div>