Question

在这里，我试图在一次单击事件中调用这两个功能。我尝试通过用“;”分隔传递click事件中的两个功能，但是正在触发第二个功能，而不是第一个需要同时触发两个事件功能的第一个功能。在这里，我附上了代码以供参考。所以请帮助我

<li title="xplane" title="yplane"  class="nav-link"
            (click)="createsectionclip('xplane')" (click)="createsectionclip('yplane')">
            <a href="javascript:void(0)"><img [src]="xclipSvg" title="xplane" [src]="yclipSvg" title="yplane"
                    class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li>
        <hr class='seperator-inline-dashed' />
        <li title="yplane" class="nav-link" (click)="createsectionclip('yplane')">
            <a href="javascript:void(0)"> <img [src]="yclipSvg" title="yplane"
                    class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px"> </a>
        </li> 

  public createsectionclip(title: string) {
    title = title.toLowerCase();
    const that = this;
    let imgSvg;
    let dd = "none";

    if (title === that._name) {
      if (this.showsectionclip) {
        imgSvg = that.activeClipping;
      } else {
        imgSvg = that.sectionclipSvg;
      } dd = title;

    } else if (title === 'xplane') {

      imgSvg = that.activeXPlane;
    } else if (title === 'yplane') {

      imgSvg = that.activeYPlane;
    } else if (title === 'zplane') {

      imgSvg = that.activeZPlane;
    } else if (title === 'xnplane') {

      imgSvg = that.activeXNPlane;
    } else if (title === 'ynplane') {

      imgSvg = that.activeYNPlane;
    } else if (title === 'znplane') {

      imgSvg = that.activeZNPlane;
    } else {

      imgSvg = that.sectionclipSvg;
    }
    this.showsectionclip = !this.showsectionclip;
    that.clippingBtnSvg = imgSvg;

    if ((imgSvg !== "none") && (title !== that._name)) {
      dd = title;
    }
    document.dispatchEvent(new CustomEvent('sectionclip', {
      bubbles: false,
      detail: dd
    }));
  }

Answer 1

我认为您应该为xplane和yplane创建另一个方法。

public createBothsectionclip() {
  createsectionclip('xplane');
  createsectionclip('yplane');
}

并且仅在单击时调用上述方法。试试这个，希望对您有所帮助。谢谢

<li title="xplane" title="yplane"  class="nav-link" (click)="createBothsectionclip()">
    <a href="javascript:void(0)">
      <img [src]="xclipSvg" title="xplane" [src]="yclipSvg" title="yplane" class="img-border img-width mx-auto" style="cursor:pointer" width="32px" height="32px">
    </a>
</li>

Answer 2

JavaScript是单线程的，因此我不确定如何同时运行它们。我会尝试做这样的事情：

在li元素中：

(click)="InvokeFunctions()"

然后该函数将调用要同时运行的对象：

function InvokeFunctions(){
   createsectionclip('xplane');
   createsectionclip('yplane')
}

这可能有效，但是要获得更好的解决方案，请查看JavaScript Web Worker。

Answer 3

正如其他人已经回答的那样，您最好的办法是将这两个函数包装到一个函数中，然后处理 click 事件。但是，它们不能同时执行：第一个将首先执行，然后第二个将运行。因此，请确保第一个功能不会对第二个功能的结果产生负面影响，并且还应注意，如果它们作用于同一事物，则只有第二个功能的效果才可见（因为第一个功能的工作可能覆盖/重做）。

单击事件同时调用两个功能

3 个答案: