前端之家

  1. 首页
  2. 问答

如何启用单击其他元素后面的元素

• 问答

我有一个path和一个circle。 path正在阻止circle click。如何启用圈子，请在圈子的任意位置单击。

可能的解决方案：
路径后的画圆，但这不是一个选择 

$("#circle").click(function(d) {
  alert("circle");
})
.path {
  fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="525" height="226">
   <circle id="circle" cx="200" cy="70" r="40" stroke="black" stroke-width="3" fill="red" />
   <path id="path1" class="path" d="M15.021114864864865,55.19999999999999L30.04222972972973,28.96633663366339L45.0633445945946,122.42376237623762L60.08445945945946,0L75.10557432432432,50.82772277227721L90.1266891891892,72.96237623762377L105.14780405405406,47.82178217821783L120.16891891891892,31.152475247524706L135.1900337837838,63.94455445544554L150.21114864864865,33.885148514851494L165.23226351351352,67.77029702970296L180.2533783783784,53.833663366336594L195.27449324324326,33.33861386138611L210.29560810810813,28.419801980197974L225.316722972973,42.08316831683166L240.33783783783784,144.0118811881188L255.3589527027027,137.72673267326732L270.3800675675676,66.67722772277227L285.4011824324324,84.7128712871287L300.4222972972973,119.41782178217821L315.44341216216213,172.97821782178218L330.46452702702703,202.4910891089109L345.4856418918919,192.38019801980198L360.5067567567568,202.4910891089109L375.5278716216216,226.8118811881188L390.5489864864865,222.16633663366338L405.57010135135135,120.23762376237622L420.59121621621625,135.26732673267327L435.6123310810811,101.65544554455445L450.633445945946,73.78217821782175L465.6545608108108,140.45940594059405L480.6756756756757,86.07920792079207L495.6967905405405,89.35841584158413L510.7179054054054,147.56435643564356L525.7390202702703,205.770297029703L540.7601351351352,170.79207920792078" style="opacity: 1; stroke: rgb(103,56,23); stroke-width: 2px; clip-path: url(&quot;#clip&quot;); pointer-events: all;" stroke-dasharray="1482.130615234375 1482.130615234375" stroke-dashoffset="0"></path>
</svg>

ppwpp 回答：如何启用单击其他元素后面的元素

在pointer-events上将内嵌滑板none更改为<path>可以解决您的问题。

$("#circle").click(function(d) {
  alert("circle");
})
.path {
  fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="525" height="226">
   <circle id="circle" cx="200" cy="70" r="40" stroke="black" stroke-width="3" fill="red" />
   <path id="path1" class="path" d="M15.021114864864865,55.19999999999999L30.04222972972973,28.96633663366339L45.0633445945946,122.42376237623762L60.08445945945946,0L75.10557432432432,50.82772277227721L90.1266891891892,72.96237623762377L105.14780405405406,47.82178217821783L120.16891891891892,31.152475247524706L135.1900337837838,63.94455445544554L150.21114864864865,33.885148514851494L165.23226351351352,67.77029702970296L180.2533783783784,53.833663366336594L195.27449324324326,33.33861386138611L210.29560810810813,28.419801980197974L225.316722972973,42.08316831683166L240.33783783783784,144.0118811881188L255.3589527027027,137.72673267326732L270.3800675675676,66.67722772277227L285.4011824324324,84.7128712871287L300.4222972972973,119.41782178217821L315.44341216216213,172.97821782178218L330.46452702702703,202.4910891089109L345.4856418918919,192.38019801980198L360.5067567567568,202.4910891089109L375.5278716216216,226.8118811881188L390.5489864864865,222.16633663366338L405.57010135135135,120.23762376237622L420.59121621621625,135.26732673267327L435.6123310810811,101.65544554455445L450.633445945946,73.78217821782175L465.6545608108108,140.45940594059405L480.6756756756757,86.07920792079207L495.6967905405405,89.35841584158413L510.7179054054054,147.56435643564356L525.7390202702703,205.770297029703L540.7601351351352,170.79207920792078" style="opacity: 1; stroke: rgb(103,56,23); stroke-width: 2px; clip-path: url(&quot;#clip&quot;); pointer-events: none;" stroke-dasharray="1482.130615234375 1482.130615234375" stroke-dashoffset="0"></path>
</svg>

javascriptsvg
本文链接：https://www.f2er.com/3151724.html

大家都在问