Html、css、js - テキストが中央にあり、近くにbuttomが右側にあるプログレスバー

Question

テキストを中央に、進行方向を右に閉じるバーを作っています。 このコードは機能しますが、 "x"をクリックすると "hide（）"機能（正しい）と "showSomething（）"機能（不正）が実行されます。どうすれば "x"をクリックする "hide（）"機能しか実行できないのですか？

デモ： 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>

Answer 1

使用event.stopPropagation()それは "下" 層にバブリングを停止します。動作しているようですkukkuz

はまた、それがthis question