Question

stopPropagation无法使用我的JQuery Mobile移动应用程序..

我的代码：

HTML：

<ul id="tmpl">
<li>
<div  class="favorite">
 <label>
   <input type="checkbox" name="sortList" class="checkboxGroup" data-role="none">
 <i></i>
</label>
</div>
</li>
</ul>

JS：

$(document).on("vclick","#tmpl li",function(){
alert("li clicked");
});

$(document).on("vclick",".favorite i",function(e){
alert("checkbox clicked");
e.stopPropagation();
});

的CSS：

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + i:before {
    content:'\e809';
    color:lightgray;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}
input[type="checkbox"]:checked + i:before {
    content:'\e809';
    color:red;
    font-family: "icon-font"; font-style : normal; text-shadow:none;
}

当尝试单击复选框获取警报作为复选框后，单击该复选框立即警告点击li。但是，只有当我尝试单击复选框时才需要复选框点击警告消息。

并尝试使用$(document).on("vclick", ".favorite", function(e) {})代替$(document).on("vclick", ".favorite i", function(e) {});

这很好用。但是这个方法在点击时会执行两次。

你可以建议我如何解决这个问题

LIB

的jquery-2.1.1.min.js
jquery.mobile-1.4.3.min.js

Answer 1

我遇到了similer问题，并且使用stopImmediatePropagation（）方法而不是stopPropagation（）解决了这个问题。

请尝试使用

e.stopImmediatePropagation();

而不是

e.stopPropagation();

Answer 2

您正在触发文档上的函数，这使得一直到DOM的顶部，然后向下搜索树。而是直接在元素上触发vclick事件。

将您的代码更改为：

$("#tmp li").on("vclick",function(){
    alert("li clicked");
});

$(".favorite i").on("vclick",function(e){
    alert("checkbox clicked");
    e.stopPropagation();
});

另外，请检查此DEMO

stoppropagation不工作jquery移动？

2 个答案: