Question

我正在使用Bootstrap通过以下代码构建导航栏：

$(document).ready(function() {
  $('.review').on('click',function() {
		alert('test');
	})
})

.navbar-light {
  position: fixed;
  width: 100%;
  height: 5%;
  z-index: 100000;
}

.navbar .row {
  width: 100%;
 }

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
<nav class="navbar navbar-light">
  <div class="row">
    <div class="col-12 col-sm-2" id="">
      <a class="" id=""><img src="img.png" class="img-fluid"></a>
    </div>
    <div class="col-12 col-sm-8">
      <div class="form-group">
        <input autocomplete="off" placeholder="Search for items" class="form-control">
      </div>
    </div>
    <div class="col-sm-2 d-none d-sm-block review"><p>Test</p></div>
  </div>
</nav>
</body>
<footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

但是，利用此代码会导致尝试单击.review类以实际选择input字段。输入字段的可点击区域似乎超出了其物理元素的末端。

我正在寻找一种使元素（.review）右侧的按钮可单击的方法，同时允许用户单击input字段-但只能在其物理区域内。< / p>

Answer 1

您可以使用event.stopPropagation()

阻止click事件冒泡到父元素。

$(document).ready(function() {

  $('.review').on('click',function(event) {
    event.stopPropagation();
        alert('test');
    })
})

输入点击区域大于输入区域，导致按钮不起作用

1 个答案: