萧潇墨 2018-05-27 05:16 采纳率: 75%
浏览 4467
已采纳

mui中的on tap 事件为什么会执行两次?

代码如下:
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
    <style>

    </style>
    <script type="text/javascript" charset="utf-8">
    </script>

</head>

<body>
    <!-- 主界面不动、菜单移动 -->
    <!-- 侧滑导航根容器 -->
    <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                        <li class="mui-table-view-cell" style="background-color: deepskyblue;font-size: 25px;">
                            <strong>菜单导航</strong>
                        </li>
                    </ul>
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                        <li class="mui-table-view-cell" style="background-color: orange;">
                            <a class="mui-navigate-right">
                                首页
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                网站导航
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                博客文章
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                视频教程
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                关于作者
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right">
                                留言板
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </aside>
        <!-- 主页面容器 -->
        <div class="mui-inner-wrap">
            <!-- 主页面标题 -->
            <header class="mui-bar mui-bar-nav">
                <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
                <h1 class="mui-title">萧潇墨个人网站</h1>
            </header>

            <div class="mui-content mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 主界面具体展示内容 -->
                    <!--顶部div-->
                    <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                                推荐
                            </a>
                            <a class="mui-control-item test">
                                热点
                            </a>
                            <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                                北京
                            </a>
                            <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                                社会
                            </a>
                            <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                                娱乐
                            </a>

                        </div>
                    </div>
                    <div class="content" id="item1mobile">
                        推荐
                    </div>
                    <div class="content" id="item2mobile">
                        热点
                    </div>
                </div>
            </div>
            <div class="mui-off-canvas-backdrop"></div>
        </div>
    </div>

    <script>
        mui(".mui-scroll").on("tap", ".test", function() {
            console.log("执行了")
            var va = this.innerText
            alert(va)

        });
    </script>
</body>


但是每次执行都是打印两次 求解

  • 写回答

2条回答 默认 最新

  • csdnflys 2018-05-27 08:04
    关注

    你的萧潇墨个人网站下,

    <div class="mui-scroll">还嵌套了一层<div class="mui-scroll">,应该是这个原因。可以考虑多加一层筛选,或改一下其中一个类名

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序