Question

我想在右侧显示中心文本和关闭按钮的进度条。这段代码有效，但当我点击＆＃34; x＆＃34;关闭程序执行＆＃34; hide（）＆＃34;功能（这是正确的）和＆＃34; showSomething（）＆＃34;功能（不正确）。我怎样才能执行＆＃34; hide（）＆＃34;功能点击＆＃34; x＆＃34;？

演示： https://jsfiddle.net/9razu5r1/

＆＃13;

.progress {
  text-align: center;
  width: 200px;
  margin: 15px auto;
}
.progress-value {
  position: absolute;
  right: 0;
  left: 0;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="progress" id=prog>
  <span class="progress-value" onclick="showSomething()">Something 50%</span>
  <div id="x" style="float: right;" onclick="hide('prog')">x</div>
  <div class="progress-bar" style="width: 50%;"></div>
</div>

＆＃13;

Answer 1

使用event.stopPropagation()它将停止冒泡到“较低”层。

它看起来像是this question

的重复

Html，css，js - 进度条，中间有文字，右边是关闭按钮

1 个答案: