父级停止传播正在禁用孙子的功能

Question

我有一个模态，当打开时得到这个jquery语句:

  $(".modal-inner").on("click", function(e) {
    e.stopPropagation();
  });

问题是，嵌套在这个模态体，我有一个子元素，我使用Clipboard.js上，所以用户可以复制文本。HTML如下:

 <div class="modal-inner"> <!-- stopPropagation applied to parent -->
   <div class="modal-close" for="modal-1"></div>
     <h1>Let's Connect</h1>
     <i class="e"></i>
     <p>You can reach me at:</p>
     <p class="em">
       <input id="emailToCopy" value="[e-mail]"/>
       <!-- This grandchild's functionality is now disabled -->
       <button class="clip-btn" id="thisClip"  data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
     </p>
 </div>

.modal-inner上的stopPropagation防止用户点击内部时关闭模态。这反过来禁用了我的按钮，该按钮在单击时执行脚本。我需要这个按钮来绕过父元素的stopPropagation。

Answer 1

你可以检查按钮是否被点击，并有条件地停止传播

$(".modal-inner").on("click", function(e) {
   if ( $(e.target).closest('#thisClip').length > 0 ) { // this is the button
       e.stopPropagation();
   }
});

Answer 2

这可能不太优雅，但我相信可以工作:

$(".modal-inner").on("click", function(e) {
    if (!$("button").is(":hover")) e.stopPropagation();
});

Answer 3

您可以尝试测试事件目标id和tagName:

$('.modal-inner').on("click", function(e) {
  //
  // you may also use:
  //  if ( $(e.target).is('#thisClip') ) {
  //
  
  if (e.target.id = 'thisClip' && e.target.tagName == 'BUTTON') {
    e.stopPropagation();
    console.log('You clicked the button: stop propagation');
  } else {
    console.log('You did not click the button');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
    <div class="modal-close" for="modal-1"></div>
    <h1>Let's Connect</h1>
    <i class="e"></i>
    <p>You can reach me at:</p>
    <p class="em">
        <input id="emailToCopy" value="[e-mail]"/>
        <!-- This grandchild's functionality is now disabled -->
        <button class="clip-btn" id="thisClip"  data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
    </p>
</div>