可点击元素阻止Bootstrap 4模式弹出按钮功能

由于垃圾桶按钮位于 tr ,可以尝试的一件事是处理垃圾箱按钮本身的click事件,并阻止事件向上传播。我假设您使用的是引导,所以下面的解决方案使用的是jQuery。这应该适用于 button 或 ActionLink 但通常当你使用 <a> ,您要使用该锚点的 href 作为 data-target .我决定使用 按钮 .所以在你身上 html

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-trash-alt"></i>
</button>

在javascript中:

$(document).ready(function() {
  $(".btn.btn-danger").click(function(e) {
    e.stopPropagation()
    let target = $(this).data('target')
    $(target).modal('show')
  })
})

下面是一个演示:
https://www.bootply.com/paKZLt8L94

如何在MVC中实现
在视图中添加防伪令牌(替换 ControllerName 下面是您的 Controller )

// The purpose of this form is to create a Anti-forgery token
// needed by the controller. Insert this anywhere in your html
@using (Html.BeginForm("DeleteConfirmed", "ControllerName", FormMethod.Post, new { id = "delete-forklift-form" }))
{
    @Html.AntiForgeryToken()
    <input type="hidden" id="forklift-Id" name="id" value="" /> 
}

在视图中的某个位置添加模式标记(可以在末尾添加)

<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this item?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="delete-confirm" type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
  </div>
</div>

将项目ID添加为 data-attribute 到您的按钮:

// We need this ID to be passed to the delete action
// This is the foreach statement in you view from the pastebin link
@foreach(var item in Model.ForkliftStockInventoryList)
{
    // ... rest of the stuff
    <button type="button" class="btn btn-danger" data-fid="@item.ForkliftID" data-toggle="modal" data-target="#DeleteConfirmationModal">
        <i class="fas fa-trash-alt"></i>
    </button>  
}

将JavaScript包装在脚本块中
将修改后的JavaScript代码放在视图的末尾:

@section Scripts{
    <script>
        $(document).ready(function () {
            // handler for the trash button
            $(".btn.btn-danger").click(function (e) {

                e.stopPropagation()
                let target = $(this).data('target')
                let forkliftId = $(this).data('fid')
                // update the forklift to delete in the hidden field
                $('#forklift-Id').val(forkliftId)
                $(target).modal('show')
            })

            // handler for the delete confirmation on the modal
            $('#delete-confirm').click(function () {
                $('#delete-forklift-form').submit()
            })
        })
    </script>
}

在您的 _Layout 正在使用jQuery之后呈现的视图,这就是jQuery的所有内容都不起作用的原因。推 @RenderSection("scripts", required: false) 以使布局中的所有脚本在每个视图中的脚本之前渲染。包装好 <script>...</script> 在叉车索引视图中 Scripts 块(见上文)

改变

 @RenderSection("scripts", required: false)
    @*<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>*@
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

到

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
// RenderSection scripts at the end

此标记可以工作,但您需要提供模式ID:

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-pencil-alt"></i>
</button>

我不知道你是不是错漏了身份证。。。

编辑:

我明白了,我想是因为你 <button> 我也有同样的问题。

尝试此标记:

<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-pencil-alt"></i>
</a>

编辑:

哦,我明白你的意思了,是的,这是你的 <tr> 激发的事件。将此添加到按钮单击事件: event.stopPropagation();

文件: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

因此,看看您的代码,因为您有一个编辑按钮,所以您应该添加一个视图按钮,并从 <tr> 标记并将其移动到按钮。这将阻止页面导航离开整行的onclick事件。通过右侧的3个按钮,用户可以知道如何单击,而不是使整行都可单击。

编辑:

因此,我将以下内容设置为MVC,在页脚后加载jQuery,在页面中加载脚本时遇到问题,因为它会在多行按钮上出错。我从来都不是 e.stopPropagation() 由于它总是会在页面上引起其他问题,但是在没有调用其他jQuery的情况下,这个页面上的接缝应该可以工作。这是一个工作 example 。

    <html>

    <head>
        <title>Parcel Sandbox</title>
        <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
     crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
     crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    </head>

    <body>
        <table>
            <tbody>
                <tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
                    <td>col 1</td>
                    <td>col 2</td>
                    <td>col 3</td>
                    <td>col 4</td>
                    <td>
                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
            <i class="fa fa-trash"></i>
          </button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
            <i class="fa fa-trash"></i>
          </button>
                    </td>
                </tr>
                <tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
                    <td>col 1</td>
                    <td>col 2</td>
                    <td>col 3</td>
                    <td>col 4</td>
                    <td>
                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
            <i class="fa fa-trash"></i>
          </button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
            <i class="fa fa-trash"></i>
          </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
                    </div>
                    <div class="modal-body">
                        TEST TEXT...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>


    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
             crossorigin="anonymous"></script>
            <script src="/src/index.js"></script>
    </body>

    </html>

对于脚本: 将脚本放在它自己的文件中,我将它放在索引中。js。 在jquery脚本加载下的布局中包括以下内容:

@RenderSection("Scripts",false/*required*/)

在视图中包括文件:

@section Scripts
{
  <script src="@Url.Content("~/Scripts/index.js")"></script>
}

指数js公司:

$(".btn-warning").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})
$(".btn-danger").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})