标签: event-propagation

我试图阻止双击表单按钮,禁用该元素几秒钟.

<form action="#" method="POST">
    <input type="text" />
    <input type="password" />
    <button class="myButton" type="submit">Send</button>
</form>


var that = this;
this.element = $(".myButton");
this.element.click(function(e) {
    this.element.prop("disabled", true);
    window.setTimeout(function() {
        that.element.prop("disabled", false);
    }, 2000);
});

它成功启用/禁用,但.click()功能的使用阻止(自动？O_o)事件的传播,并且页面不遵循表单动作属性中的链接.

注意我正在尝试将行为添加到以前完美运行的表单按钮(POST到 aciton链接).此外,启用/禁用工作也很完美(无论我在上述代码的调整中可能出现的最终错误).

PS - 任何解决方案必须是跨浏览器并与IE8兼容.

我通过单击嵌套元素来触发函数。为了防止冒泡，我可以使用e.stopPropagation();.

如果停止传播，其他脚本就会遇到麻烦，因为它们依赖于这些元素的冒泡。还有其他方法吗？某种 if 语句？

html

<div class="nested-element">
  <div class="nested-element">
    content
  </div>
  content
</div>

现实生活中的嵌套是无限的。

jQuery

$('.selector').on('click', '.nested-element', function(e) {
    //e.stopPropagation();
    console.log($(this));
});

上面将首先输出根父元素，然后向最近的元素靠近。我只想获得最接近的元素。

停止JavaScript事件传播是否被认为是“好的做法”-它以任何方式提高性能吗？

我想知道在布局目的之外是否有其他好处，您可以在其中停止传播，以免意外触发多个事件。

我正在创建一个离子应用程序，当我单击卡片时会触发模式，我面临的问题是，当我单击卡片上的按钮时，模式也会打开，我该如何阻止这种情况发生。我对任何解决方法持开放态度，因为我已经被困在这个问题上有一段时间了。下面是一些有用的代码和图片：

//html
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let item of exercises">
        <ion-card class="exercise-card" (click)="openModal(item.id)">
          <img [src]=item.image class="image-card">
          <h3 style="font-weight: bold;">{{item.name}}</h3>
          <h5>{{item.sets}} sets of {{item.reps}} reps and {{item.remarks}}</h5>
          <h6>{{item.date | date: 'dd/MM/yyyy'}} ({{item.time}})</h6>
          <br>
          <div style="text-align: center;">
            <ion-button size="medium" style="width: 30%;" color="success" (click)="complete(item)">
              <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" type="submit" style="width: 30%;" [routerLink]="['/edit-exercise', item.id]">
              <ion-icon slot="icon-only" name="create-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" style="width: 30%;" color="danger" (click)="delete(item)">
              <ion-icon slot="icon-only" name="trash-bin"></ion-icon>
            </ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

该模式仅应在以下情况下触发： 单击此页面上的卡片：

。

但当我单击蓝色编辑按钮时它也会触发：

。