1

I want to make progress bar with text on center and close button on right. This code works but when I am clicking on "x" to close program executes "hide()" function (that is correct) and "showSomething()" function (incorrect). How Can I execute only "hide()" function clicking on "x"?

Demo: https://jsfiddle.net/9razu5r1/

.progress {
  text-align: center;
  width: 200px;
  margin: 15px auto;
}
.progress-value {
  position: absolute;
  right: 0;
  left: 0;
}
<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>
chirag
  • 1,761
  • 1
  • 17
  • 33
Onez
  • 91
  • 10

1 Answers1

1

Use event.stopPropagation() It will stop bubbling to the "lower" layers.

Also it looks like a duplication of this question

Community
  • 1
  • 1
kraklin
  • 526
  • 1
  • 4
  • 7