我可以在这个元素中有两个 onclick 事件吗？答案

【问题标题】：Could I have two onclick events in this one element?我可以在这个元素中有两个 onclick 事件吗？
【发布时间】：2021-12-20 23:11:52
【问题描述】：

所以我知道在一个元素中可以有两个 onclick 事件。但我不确定如何完全适合我的情况。还有另一种我没有尝试的方法吗？我正在尝试添加 ShowAlert() 方法。

我的代码如下所示：

<button class="btn btn-primary" @onclick="e => AddToCart(context)">Add To Cart</button>

我已经尝试过（每次尝试这些都会出错）：

<button class="btn btn-primary" @onclick="e => AddToCart(context); ShowAlert();">Add To Cart</button>

和：

<button class="btn btn-primary" @onclick="ShowAlert(); e => AddToCart(context)">Add To Cart</button>

这是我的 ShowAlert 方法，以备不时之需：

@code
{
    async Task ShowAlert()
    {
        await JsRuntime.InvokeVoidAsync("createAlert");
    }
}

感谢任何帮助/建议！谢谢！

【问题讨论】：

可以多次addEventListener (developer.mozilla.org/en-US/docs/Web/API/EventTarget/…)，但只能定义一个html属性。

标签： javascript c# jquery asp.net-core razor

【解决方案1】：

您似乎在使用一些我不熟悉的库，所以不确定这是否可行。

您需要将这些事件内联附加到元素上吗？我首先想到的是在 JS 中附加它们
如果 #1 不可能，那么创建一个调用它们的单个连接函数怎么样？

function addToCartAndShowAlert(context) {
   AddToCart(context)
   ShowAlert()
}

<button class="btn btn-primary" @onclick="e => addToCartAndShowAlert(context)">Add To Cart</button>

只是尝试的想法，祝你好运

【讨论】：

【解决方案2】：

以下应该正常工作，将其包裹在括号中以像匿名函数一样调用它：

<button @onclick="(e => AddToCart(context))();ShowAlert();">Hi</button>

function AddToCart() {
  alert('add to cart');
}

function ShowAlert() {
  alert('show alert');
}

&lt;button onclick="(e =&gt; AddToCart())();ShowAlert();"&gt;Hi&lt;/button&gt;

【讨论】：

【解决方案3】：

你可以试试这个：

 <button class="btn btn-primary" @onclick="@(() => { AddToCart("content"); ShowAlert(); })">Add To Cart</button>
@code
{
    async Task ShowAlert()
    {
        await JsRuntime.InvokeVoidAsync("createAlert");
    }
    void AddToCart(string val)
    {
        StateHasChanged();
    }
}

结果：

【讨论】：