包含 <object> 的 DIV 上的 jQuery 单击事件答案

【问题标题】：jQuery click event on DIV containing an <object>包含 <object> 的 DIV 上的 jQuery 单击事件
【发布时间】：2017-11-14 18:26:36
【问题描述】：

我已经制作了几个自定义 SVG 按钮，它们包含 CSS 代码，用于在 :hover 上进行美学更改，如代码 sn-p 示例所示。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.506945in" height="0.1125in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4494 997"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[

#butBox {
    fill: #FF6600;
    stroke: #FF6600;
    stroke-width: 30;
    transition: all 0.4s;
}

#butTxt {
    fill: #ffffff;
transition: all 0.4s;
}

#butWrap:hover #butBox {
    fill: #ffffff;
    stroke: #FF6600;
    cursor: pointer;
}

#butWrap:hover #butTxt {
    fill: #FF6600;
    cursor: pointer;
}

   ]]>
  </style>
 </defs>
 <g id="butWrap">
   <rect id="butBox" x="31" y="31" width="4433" height="936"/>
   <g id="butTxt">
    <path class="fil1" d="M373 626l-18 0 0 -238 -82 0 0 -16 183 0 0 16 -83 0 0 238zm138 -111l0 111 -17 0 0 -254 60 0c32,0 55,5 70,17 15,12 23,29 23,53 0,17 -5,31 -14,43 -9,12 -22,20 -41,25l69 116 -21 0 -66 -111 -63 0zm0 -15l49 0c21,0 38,-5 50,-15 12,-9 18,-23 18,-42 0,-19 -6,-34 -18,-42 -11,-9 -30,-14 -57,-14l-42 0 0 113zm317 36l-103 0 -36 90 -20 0 103 -255 11 0 100 255 -20 0 -35 -90zm-97 -16l91 0 -35 -91c-3,-8 -6,-18 -10,-30 -3,11 -7,21 -10,30l-36 91zm382 -24c0,43 -12,75 -34,97 -22,22 -55,33 -99,33l-61 0 0 -254 69 0c41,0 72,10 93,31 21,22 32,53 32,93zm-20 1c0,-36 -9,-64 -28,-82 -18,-19 -45,-28 -81,-28l-47 0 0 223 42 0c76,0 114,-37 114,-113zm217 129l-139 0 0 -254 139 0 0 16 -121 0 0 96 114 0 0 17 -114 0 0 109 121 0 0 16zm364 -127c0,40 -10,72 -30,95 -20,24 -48,36 -84,36 -35,0 -63,-12 -83,-36 -20,-23 -30,-55 -30,-96 0,-40 10,-72 30,-95 21,-24 48,-35 84,-35 35,0 63,11 83,35 20,23 30,55 30,96zm-208 0c0,36 8,64 24,84 17,20 40,30 70,30 31,0 54,-10 71,-30 16,-19 24,-48 24,-84 0,-37 -8,-65 -24,-85 -17,-19 -40,-29 -70,-29 -31,0 -54,10 -70,29 -17,20 -25,48 -25,85zm452 127l-18 0 -151 -226 -1 0c1,27 2,47 2,61l0 165 -17 0 0 -254 17 0 151 225 1 0c-1,-21 -2,-41 -2,-59l0 -166 18 0 0 254z"/>
     <path class="fil1" d="M3464 372l0 16 -88 0 0 238 -18 0 0 -238 -128 0 0 238 -15 0 -179 -233 0 233 -16 0 -6 0 -12 -29 0 0 -32 -72 0 0 -8 -18 -10 -22 0 0 -43 -99 -105 240 -20 0 115 -254 22 0 99 217 0 -217 24 0 169 222 0 -222c84,0 167,0 251,0l0 0z"/>
     <path class="fil1" d="M2518 609c43,-3 62,-22 62,-58 0,-29 -17,-44 -52,-44l-52 0c-48,0 -71,-22 -71,-64 0,-41 25,-64 75,-70 14,-2 21,-1 34,-1 100,0 198,0 297,0l0 16 -87 0 0 238 -19 0 0 -238c-64,0 -127,0 -191,1 -11,0 -21,0 -33,1 -38,5 -57,22 -57,53 0,31 17,46 52,46l52 0c47,0 70,21 70,62 0,42 -32,74 -70,75l0 0 -156 0 -16 0 0 -17 0 -216 -179 233 -15 0c0,-85 0,-170 0,-254l17 0c0,74 0,148 0,222l170 -222 23 0 0 237 146 0 0 0z"/>
     <rect class="fil2" x="2094" y="372" width="16.8761" height="254.244"/>
     <path class="fil1" d="M3504 377l0 -10 0 -6 7 0 90 0c43,0 76,11 98,32 20,19 30,47 32,83 -21,-69 -52,-98 -133,-99 -25,0 -56,0 -94,0l0 0z"/>
     <path class="fil1" d="M3500 630l0 -143 30 0 0 121 64 0c34,0 59,-9 75,-27 17,-19 25,-47 25,-85 0,-33 -8,-58 -25,-74 -16,-16 -41,-24 -75,-24l-31 0 -33 0 -30 0 0 -13c37,0 68,0 93,0 80,2 112,30 133,99 1,4 1,8 1,12 0,47 -12,81 -34,105 -22,23 -55,35 -99,35l-88 0 -6 0 0 -6 0 0z"/>
     <path class="fil1" d="M4214 621l0 14c-56,2 -92,-29 -109,-70 -2,-4 -4,-8 -5,-13 -1,5 -3,9 -4,13 -17,41 -54,72 -110,70l0 -28c44,1 71,-22 84,-53 6,-13 9,-29 9,-44 1,-15 -2,-31 -7,-45 -12,-36 -41,-66 -86,-68l0 -14c49,3 87,30 108,96 7,20 9,41 15,62 18,53 51,84 105,80l0 0 0 0z"/>
     <path class="fil1" d="M4222 390c-45,2 -75,32 -87,69 -5,14 -7,30 -7,45 0,15 4,30 9,43 13,32 41,55 84,54l0 14c-54,3 -87,-27 -105,-80 -6,-21 -9,-42 -15,-63 -21,-65 -59,-93 -108,-96l-1 14 2 -28c58,3 96,41 111,88l2 5 2 -5c15,-47 53,-85 112,-88l1 28 0 0zm-113 160c-1,-1 -1,-2 -2,-4l0 0c1,2 1,3 2,4zm-116 79l0 -28 0 0 0 28zm4 -28c41,-1 68,-23 80,-54l1 0c1,-3 2,-6 3,-9 2,-6 3,-12 4,-18 0,-2 1,-4 1,-5 0,-4 0,-7 0,-11 0,-5 0,-11 0,-17 0,6 0,12 0,17 0,4 0,7 0,11 0,1 -1,3 -1,5 -1,6 -2,12 -4,18 -1,3 -2,6 -3,9l-1 0c-12,31 -39,53 -80,54zm88 -116c0,-1 0,-2 0,-3 0,1 0,2 0,3zm-11 -39c-2,-4 -4,-8 -6,-12 2,4 4,8 6,12zm-10 -17c0,-1 -1,-2 -1,-2 0,0 1,1 1,2z"/>
     <path class="fil1" d="M3765 591c0,40 29,46 56,45l126 -3 0 -10c-53,0 -98,0 -135,-1 -1,0 -1,-1 -2,-1 -32,-2 -45,-33 -45,-75l0 45z"/>
     <path class="fil1" d="M3951 613l0 -10 -125 -3c-12,0 -26,0 -26,-19l0 -72 134 -3 0 -22 -134 -3 0 -73c0,-9 0,-20 21,-20l130 -1 0 -21 -130 -5c-27,-1 -51,12 -51,47l0 129c0,42 13,73 45,75 0,0 1,0 2,0 37,2 82,2 134,1l0 0z"/>
   </g>
 </g>
</svg>

它们完美无瑕，当我将它们添加到我的网站并将鼠标悬停在上方时，美学转换成功触发，但当我尝试绑定点击事件时，它就不起作用了。这是我使用的 HTML：

&lt;div class="button"&gt;&lt;object type="image/svg+xml" data="img/button.svg"&gt;&lt;/object&gt;&lt;/div&gt;

我怀疑这与我编写 HTML 的方式有关，在 div 中嵌入一个对象（而不是通常的 img 标签）。我尝试了不同的东西，例如内联 HTML onclick 和 jQuery 触发器，我必须通过一个简单的方法来完成它：

$(".button").click(function() {
    alert('This button has been clicked.');
});

但不知何故看起来对象使 div 黯然失色，因为如果我点击按钮的侧面（仍在 div 区域内）它会触发警报（），但如果我点击按钮（在对象区域）本身。

我不知道一个对象会以这种方式运行，有人可以解释为什么会发生这种情况，如果我正在做的事情被认为是不好的做法，以及是否有任何解决方法？

谢谢。

【问题讨论】：

抱歉，如果我对我尝试过的事情发表评论可能会更好：a) 内联 HTML onclick 代码。 b) 给对象一个 CLASS 或一个 ID 并将其绑定到 jQuery 代码。 c) 将 jQyery 语法从 $('.class).click(function() {});到 $('.class).on('click', function() {}); d) 尝试使用 CSS z-index 将 div 放在对象的前面。 e) 尝试使用 CSS 用户事件来禁用对象。注意：我知道 D 和 E 都会破坏按钮自包含 CSS 的目的，我正在摆弄是否能找到问题的根源。
How to add JavaScript onClick handler to an embedded html object?的可能重复
Paul LeBeau 是对的，感谢您指出我正确的方向，至少部分是正确的方向。答案将通过开发 svg 中的整个代码，例如：。对于一个单一用途的按钮，我想是一个很好的解决方案，但是在需要对不同链接使用相同按钮的情况下（例如某种立即购买！按钮），如果没有更深入的 JS 使用，这个解决方案是不可行的.
有没有办法通过 JS（我会在 SVG 按钮代码中添加）让点击事件指向父元素中保存的 URL/锚点？这样我仍然可以拥有一个 SVG 文件并在 HTML 内的父容器中指定目标 URL。
我建议你放弃 <object> 并考虑使用 SVG spritesheets。有各种教程，例如css-tricks.com/svg-sprites-use-better-icon-fonts

标签： jquery html css object svg

【解决方案1】：

尝试使用svg元素

$(".button").on("click", function(e) {
  alert("This button has been clicked.");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-->
<div class="button">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.506945in" height="0.1125in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4494 997"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[

#butBox {
    fill: #FF6600;
    stroke: #FF6600;
    stroke-width: 30;
    transition: all 0.4s;
}

#butTxt {
    fill: #ffffff;
transition: all 0.4s;
}

#butWrap:hover #butBox {
    fill: #ffffff;
    stroke: #FF6600;
    cursor: pointer;
}

#butWrap:hover #butTxt {
    fill: #FF6600;
    cursor: pointer;
}

   ]]>
  </style>
 </defs>
 <g id="butWrap">
   <rect id="butBox" x="31" y="31" width="4433" height="936"/>
   <g id="butTxt">
    <path class="fil1" d="M373 626l-18 0 0 -238 -82 0 0 -16 183 0 0 16 -83 0 0 238zm138 -111l0 111 -17 0 0 -254 60 0c32,0 55,5 70,17 15,12 23,29 23,53 0,17 -5,31 -14,43 -9,12 -22,20 -41,25l69 116 -21 0 -66 -111 -63 0zm0 -15l49 0c21,0 38,-5 50,-15 12,-9 18,-23 18,-42 0,-19 -6,-34 -18,-42 -11,-9 -30,-14 -57,-14l-42 0 0 113zm317 36l-103 0 -36 90 -20 0 103 -255 11 0 100 255 -20 0 -35 -90zm-97 -16l91 0 -35 -91c-3,-8 -6,-18 -10,-30 -3,11 -7,21 -10,30l-36 91zm382 -24c0,43 -12,75 -34,97 -22,22 -55,33 -99,33l-61 0 0 -254 69 0c41,0 72,10 93,31 21,22 32,53 32,93zm-20 1c0,-36 -9,-64 -28,-82 -18,-19 -45,-28 -81,-28l-47 0 0 223 42 0c76,0 114,-37 114,-113zm217 129l-139 0 0 -254 139 0 0 16 -121 0 0 96 114 0 0 17 -114 0 0 109 121 0 0 16zm364 -127c0,40 -10,72 -30,95 -20,24 -48,36 -84,36 -35,0 -63,-12 -83,-36 -20,-23 -30,-55 -30,-96 0,-40 10,-72 30,-95 21,-24 48,-35 84,-35 35,0 63,11 83,35 20,23 30,55 30,96zm-208 0c0,36 8,64 24,84 17,20 40,30 70,30 31,0 54,-10 71,-30 16,-19 24,-48 24,-84 0,-37 -8,-65 -24,-85 -17,-19 -40,-29 -70,-29 -31,0 -54,10 -70,29 -17,20 -25,48 -25,85zm452 127l-18 0 -151 -226 -1 0c1,27 2,47 2,61l0 165 -17 0 0 -254 17 0 151 225 1 0c-1,-21 -2,-41 -2,-59l0 -166 18 0 0 254z"/>
     <path class="fil1" d="M3464 372l0 16 -88 0 0 238 -18 0 0 -238 -128 0 0 238 -15 0 -179 -233 0 233 -16 0 -6 0 -12 -29 0 0 -32 -72 0 0 -8 -18 -10 -22 0 0 -43 -99 -105 240 -20 0 115 -254 22 0 99 217 0 -217 24 0 169 222 0 -222c84,0 167,0 251,0l0 0z"/>
     <path class="fil1" d="M2518 609c43,-3 62,-22 62,-58 0,-29 -17,-44 -52,-44l-52 0c-48,0 -71,-22 -71,-64 0,-41 25,-64 75,-70 14,-2 21,-1 34,-1 100,0 198,0 297,0l0 16 -87 0 0 238 -19 0 0 -238c-64,0 -127,0 -191,1 -11,0 -21,0 -33,1 -38,5 -57,22 -57,53 0,31 17,46 52,46l52 0c47,0 70,21 70,62 0,42 -32,74 -70,75l0 0 -156 0 -16 0 0 -17 0 -216 -179 233 -15 0c0,-85 0,-170 0,-254l17 0c0,74 0,148 0,222l170 -222 23 0 0 237 146 0 0 0z"/>
     <rect class="fil2" x="2094" y="372" width="16.8761" height="254.244"/>
     <path class="fil1" d="M3504 377l0 -10 0 -6 7 0 90 0c43,0 76,11 98,32 20,19 30,47 32,83 -21,-69 -52,-98 -133,-99 -25,0 -56,0 -94,0l0 0z"/>
     <path class="fil1" d="M3500 630l0 -143 30 0 0 121 64 0c34,0 59,-9 75,-27 17,-19 25,-47 25,-85 0,-33 -8,-58 -25,-74 -16,-16 -41,-24 -75,-24l-31 0 -33 0 -30 0 0 -13c37,0 68,0 93,0 80,2 112,30 133,99 1,4 1,8 1,12 0,47 -12,81 -34,105 -22,23 -55,35 -99,35l-88 0 -6 0 0 -6 0 0z"/>
     <path class="fil1" d="M4214 621l0 14c-56,2 -92,-29 -109,-70 -2,-4 -4,-8 -5,-13 -1,5 -3,9 -4,13 -17,41 -54,72 -110,70l0 -28c44,1 71,-22 84,-53 6,-13 9,-29 9,-44 1,-15 -2,-31 -7,-45 -12,-36 -41,-66 -86,-68l0 -14c49,3 87,30 108,96 7,20 9,41 15,62 18,53 51,84 105,80l0 0 0 0z"/>
     <path class="fil1" d="M4222 390c-45,2 -75,32 -87,69 -5,14 -7,30 -7,45 0,15 4,30 9,43 13,32 41,55 84,54l0 14c-54,3 -87,-27 -105,-80 -6,-21 -9,-42 -15,-63 -21,-65 -59,-93 -108,-96l-1 14 2 -28c58,3 96,41 111,88l2 5 2 -5c15,-47 53,-85 112,-88l1 28 0 0zm-113 160c-1,-1 -1,-2 -2,-4l0 0c1,2 1,3 2,4zm-116 79l0 -28 0 0 0 28zm4 -28c41,-1 68,-23 80,-54l1 0c1,-3 2,-6 3,-9 2,-6 3,-12 4,-18 0,-2 1,-4 1,-5 0,-4 0,-7 0,-11 0,-5 0,-11 0,-17 0,6 0,12 0,17 0,4 0,7 0,11 0,1 -1,3 -1,5 -1,6 -2,12 -4,18 -1,3 -2,6 -3,9l-1 0c-12,31 -39,53 -80,54zm88 -116c0,-1 0,-2 0,-3 0,1 0,2 0,3zm-11 -39c-2,-4 -4,-8 -6,-12 2,4 4,8 6,12zm-10 -17c0,-1 -1,-2 -1,-2 0,0 1,1 1,2z"/>
     <path class="fil1" d="M3765 591c0,40 29,46 56,45l126 -3 0 -10c-53,0 -98,0 -135,-1 -1,0 -1,-1 -2,-1 -32,-2 -45,-33 -45,-75l0 45z"/>
     <path class="fil1" d="M3951 613l0 -10 -125 -3c-12,0 -26,0 -26,-19l0 -72 134 -3 0 -22 -134 -3 0 -73c0,-9 0,-20 21,-20l130 -1 0 -21 -130 -5c-27,-1 -51,12 -51,47l0 129c0,42 13,73 45,75 0,0 1,0 2,0 37,2 82,2 134,1l0 0z"/>
   </g>
 </g>
</svg>
<div>

【讨论】：

嗨，感谢您的回答 - 我应该提到的一件事是，我希望将 SVG 代码保留在外部文件中，我想尽量保持 HTML 代码像可能。

【解决方案2】：

您是否尝试过 z-index 和相对位置？您是否尝试过为按钮提供自己的类并以这种方式定位它？您是否尝试过防止默认并制作自己的点击功能？

【讨论】：

欢迎来到 Stack Overflow！这些似乎更像是您应该作为评论添加的可能答案，而不是明确的答案。
您好，感谢您的评论。我试过 .button-container-class { position: relative;宽度：100%；填充顶部：0.25em； z 指数：60； } .button-container-class 对象 { 宽度：90%; z 指数：50；试图将对象定位在 div 后面并使其可用于点击事件但没有成功。

【解决方案3】：

这个css应该有帮助：

object {
   pointer-events: none;
}

【讨论】：