mui switch Click event does not bubble

I encountered a problem at work

App end mobile phones, using mui frame, a phone number in claim left, the right switch is a switch, and click on the title, you can expand under basic personnel information.

Using the folding panel.

First on the map as follows:

        

Appears at the beginning of the question is: click on the right button switch, will be linked to the basic information open, do not want this, you want to click on the switch button nothing to do with folding panels, it is necessary to cancel the operation click on the bubble;

The key code is as follows

<ul class="mui-table-view">

<li class="mui-table-view-cell mui-collapse">
<a id="icon-phone"><span class="mui-icon mui-icon-phone"></span>13703956635<div class="mui-switch mui-active" id="text2">
<div class="mui-switch-handle"></div>
</div></a>
<div class="mui-collapse-content">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active">基本信息</a>
</div>
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed mui-margin-top10">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">姓名:</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">张*</span>
</div>
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">性别:</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">男</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">ARPU:</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">98</span>
</div>
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">宽带数:</p>
</div>
<div class="mui-table-cell mui-col-xs-3">
<span class="mui-h5">2</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">IPTV数:</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">3</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">套餐:</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">99元套餐</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-3">
<p class="mui-h6 mui-ellipsis">小区:</p>
</div>
<div class="mui-table-cell mui-col-xs-9">
<span class="mui-h5">郑东新区雅居乐国际花园</span>
</div>
</div>
</li>
</ul>
</div>
</li>

</ul>

Finally, add the following code in the footer:

<script src="../src/component/mui/examples/hello-mui/js/mui.min.js"></script>
<script src="../src/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(".mui-switch").on("tap",function(event){
event.stopPropagation();
})
</script>

ok! meet demand.

Guess you like

Origin www.cnblogs.com/snowhite/p/11320353.html