JQuery无法防止事件冒泡
我试图突出显示Dropable上的元素。列表中有子类型和父类型元素，我也放置了相应的类。事情已经找到，但我无法阻止事件冒泡。我试过下面的代码，但不知怎的没有工作。当Dragable被拖动到Dropable上时，所有元素（带有父类）开始闪烁黄色背景。我不知道如何阻止这一切。我在over函数中尝试了StopRopagation（）、stopImmediatePropagation（），但没有成功。我的代码如下：JQuery无法防止事件冒泡,jquery,jquery-ui,droppable,Jquery,Jquery Ui,Droppable,我试图突出显示Dropable上的元素。列表中有子类型和父类型元素，我也放置了相应的类。事情已经找到，但我无法阻止事件冒泡。我试过下面的代码，但不知怎的没有工作。当Dragable被拖动到Dropable上时，所有元素（带有父类）开始闪烁黄色背景。我不知道如何阻止这一切。我在over函数中尝试了StopRopagation（）、stopImmediatePropagation（），但没有成功。我的代码如下： <!doctype html> <html> <head&
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<style>
#NodeDetails {
border: solid 1px red;
width: 40%;
height: 200px;
overflow-y: auto;
overflow-x: auto;
font-size:12px;
float:right;
}
#TestContainer {
border: solid 1px red;
width: 40%;
height: 400px;
overflow-y: auto;
overflow-x: auto;
float:left;
cursor:default;
}
ul{
list-style-type: none;
text-align: left;
padding-left: 15px;
padding-top: 3px;
}
li{
padding-bottom: 0px;
padding-top: 1px;
display:inline;
}
img {
vertical-align: top;
padding-right: 0px ;
margin-right: 0px ;
height: 15px;
width: 15px;
}
img .testcat {
}
span {
vertical-align: top;
padding-left: 5px ;
padding-right: 5px ;
color: black;
font-size:15px;
}
.nochild {
font-size:10px;
}
.droppable-below {
border-bottom: 2px solid blue;
margin-top: 0px;
margin-bottom: 5px;
}
.droppable-in {
border: 1px solid black;
background-color: yellow;
}
/*
.TestContainer, .TestContainer ul, .TestContainer li {
position: relative;
}
.TestContainer ul {
list-style: none;
padding-left: 12px;
}
.TestContainer li::before, .TestContainer li::after {
content: "";
position: absolute;
left: -12px;
}
.TestContainer li::before {
border-top: 2px solid #000;
top: 5px;
width: 6px;
height: 0;
margin-left: 6px;
}
.TestContainer li::after {
border-left: 2px solid #000;
height: 170%;
width: 0px;
top: -8px;
margin-left: 6px;
}
.TestContainer ul > li:last-child::after {
height: 8px;
} */
</style>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="TreeController">
<div id="TestContainer" class="TestContainer">
<collection collection='testdata'></collection>
</div>
</div>
</div>
</body>
<script>
var mainApp = angular.module("mainApp", [])
mainApp.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {collection: '='},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
})
mainApp.directive('member', function ($compile) {
var NewChild = "<li><img class=opcl ng-src={{PlusMinusImage}} ng-click=ShowHideFunc()></img><img class=testcat ng-src={{C15Image}}></img><span ng-click=ShowDetailsFunc()>{{member.TagName}}</span></li>";
var linkerfunc = function(scope, element, attrs) {
var collectionSt = '<collection collection="member.children"></collection>';
$compile(collectionSt)(scope, function(cloned, scope) {
//element.css("background-color", "#ff00ff");
if (scope.member.children.length === 0){
$(element[0]).children().first().remove()
$(element[0]).addClass("child");
} else
{
$(element[0]).addClass("parent");
}
element.attr('xml-path', scope.member.TagPath);
element.append(cloned);
});
scope.ShowHideFunc = function() {
scope.ShowHideCtrlFunc(element,event);
event.stopImmediatePropagation();
};
}
return {
restrict: "E",
replace: true,
scope: {member: '=', ShowHideCtrlFunc : '&', ShowDetailsCtrlFunc : '&'},
template: NewChild,
controller: 'TreeController',
link: linkerfunc
}
})
mainApp.controller('TreeController', function ($scope,$http) {
$scope.testdata = [{"TagName":"LandXML","TagPath":">MyRootNode>ChildItems>LandXML","children":[{"TagName":"Units","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Units","children":[{"TagName":"Imperial","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>Imperial","children":[]},{"TagName":"Project","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Project","children":[]},{"TagName":"Application","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Application","children":[{"TagName":"Author","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[2]>Author","children":[]},{"TagName":"Alignments","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Alignments","children":[]},{"TagName":"Roadways","TagPath":">MyRootNode>ChildItems>ChildItems[1]>Roadways","children":[{"TagName":"Roadway1","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[1]","children":[]},{"TagName":"Roadway2","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[2]","children":[]},{"TagName":"Roadway3","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]","children":[]},{"TagName":"Roadway4","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[4]","children":[]},{"TagName":"Roadway5","TagPath":">MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[5]","children":[]}]}]}]}]},{"TagName":"Surfaces","TagPath":">MyRootNode>ChildItems>Surfaces","children":[{"TagName":"Surface1","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface1","children":[]},{"TagName":"Surface2","TagPath":">MyRootNode>ChildItems>ChildItems[2]>Surface2","children":[]}]}]
$scope.PlusMinusImage = '../Images/Plus15.png';
$scope.C15Image = '../Images/C15.png' ;
$scope.ShowHideCtrlFunc = function(element,event) {
//console.log("in function ShowHideCtrlFunc");
if ($scope.PlusMinusImage === '../Images/Plus15.png') {
$scope.PlusMinusImage = '../Images/Minus15.png';
} else {
$scope.PlusMinusImage = '../Images/Plus15.png';
}
$(element).children().last().toggle();
event.stopImmediatePropagation();
};
makedraggable()
});
function makedraggable() {
var myimg = $('<img/>').attr({
src:"images/whitebriefcase4.png"
})
$("li").draggable({
containment: '#TestContainer',
cursorAt: { top: -0, left: -15 },
helper: function() {
return $("<div></div>").append(myimg);
},
revert: "invalid",
drag: function(event,ui) {
$(this).find('span').first().css({"font-weight": "bold", "background-color": "lightblue"});
},
stop: function(){
$(this).find('span').first().css({"font-weight": "normal", "background-color": "white"});
},
drop: function (event){
console.log("I am dragged and dropped")
//event.stopImmediatePropagation();
}
});
$('.parent').droppable({
greedy: true,
hoverClass: "droppable-in", //, border: 5px solid red;
/*
over: function() {
//$(this).children().first().next().css({"border": "1px solid black", "background-color": "yellow"})
$(this).css({"border": "1px solid black", "background-color": "yellow"})
//console.log($(this).parent());
},
out: function() {
$(this).css({"border": "none", "background-color": "white"})
}, */
drop: function(event, ui) {
//console.log($(ui.draggable).text());
//console.log($(this).next());
$(this).next().append($(ui.draggable));
$(this).css({"border": "none", "background-color": "white"})
}
});
};
</script>
</html>
#点点滴滴{
边框：实心1px红色；
宽度：40%；
高度：200px；
溢出y：自动；
溢出-x：自动；
字体大小：12px；
浮动：对；
}
#测试容器{
边框：实心1px红色；
宽度：40%；
高度：400px；
溢出y：自动；
溢出-x：自动；
浮动：左；
游标：默认值；
}
保险商实验室{
列表样式类型：无；
文本对齐：左对齐；
左侧填充：15px；
垫面：3件；
}
李{
垫底：0px；
垫面：1px；
显示：内联；
}
img{
垂直对齐：顶部；
右边填充：0px；
右边距：0px；
高度：15px；
宽度：15px；
}
测试猫{
}
跨度{
垂直对齐：顶部；
左侧填充：5px；
右侧填充：5px；
颜色：黑色；
字体大小：15px；
}
诺奇尔德先生{
字体大小：10px；
}
.可放在下面{
底部边框：2件纯蓝；
边际上限：0px；
边缘底部：5px；
}
.可降落{
边框：1px纯黑；
背景颜色：黄色；
}
/*
.TestContainer、.TestContainer ul、.TestContainer li{
位置：相对位置；
}
.TestContainer ul{
列表样式：无；
左侧填充：12px；
}
.TestContainer li:：之前，.TestContainer li:：之后{
内容：“；
位置：绝对位置；
左-12px；
}
.TestContainer li:：之前{
边框顶部：2个实心#000；
顶部：5px；
宽度：6px；
身高：0；
左边距：6px；
}
.TestContainer li:：在{
左边框：2倍实心#000；
身高：170%；
宽度：0px；
顶部：-8px；
左边距：6px；
}
.TestContainer ul>li:最后一个子项：：之后{
高度：8px；
} */
var mainApp=angular.module（“mainApp”，[]）
mainApp.directive（'collection'，函数（）{
返回{
限制：“E”，
替换：正确，
作用域：{collection:'='}，
模板：“
”
}
})
mainApp.directive（'member'，function（$compile）{
var NewChild=“{{member.TagName}} ”；
var linkerfunc=函数（范围、元素、属性）{
var collectionSt=''；
$compile（collectionSt）（作用域，函数（克隆，作用域）{
//css（“背景色”，“#ff00ff”）；
if（scope.member.children.length==0）{
$（元素[0]）.children（）.first（）.remove（）
$（元素[0]）.addClass（“子元素”）；
}否则
{
$（元素[0]）.addClass（“父项”）；
}
element.attr（'xml-path'，scope.member.TagPath）；
元素。追加（克隆）；
});
scope.ShowHideFunc=函数（）{
scope.ShowHideCtrlFunc（元素、事件）；
事件。stopImmediatePropagation（）；
};
}
返回{
限制：“E”，
替换：正确，
作用域：{member:'='，ShowHideCtrlFunc:'&'，ShowDetailsCtrlFunc:'&'}，
模板：NewChild，
控制器：“树控制器”，
链接：linkerfunc
}
})
mainApp.controller（'TreeController'，函数（$scope，$http）{
$scope.testdata=[{“标记名”：“LandXML”，“TagPath”：“>MyRootNode>ChildItems>LandXML”，“子项”：[{“标记名”：“单位”，“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>Imperial”，“子项”：[{“标记名”：“项目”，“标记路径”：“>MyRootNode>ChildItems[1]>ChildItems”，“子项”：[]}，{“标记名”：“项目”，“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>Project”、“ChildItems:[]}，{“标记名”：“应用程序”、“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>Project”、“ChildItems:[]}，{“标记名”：“对齐”、“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>Alignments”子项“：[]”标记名“：“道路”、“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>Roadways”、“子项“：[{”标记名“：“道路1”、“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>ChildItems[1]>ChildItems[1]>ChildItems[1]>ChildItems[1]>ChildItems[1]，“子项“：[]>Roadway3]，“子项“{”标记名“：”道路3]}，{”道路3“，“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>ChildItems[3]>Roadway[3]，“children”：“{”标记名“：“Roadway4”，“标记路径”：“>MyRootNode>ChildItems>ChildItems[1]>ChildItems[1]>ChildItems[1]>ChildItems[4]，“children:[]}，”，“children:[]}，{”标记名“：“Roadway5”，“标记路径”：“>MyRootNode>ChildItems>ChildItems>ChildItems[1]>RoadItems[3]>RoadItems[5]，“Childrent[5]，“，“标记路径”：“>MyRootNode>ChildItems>Surfaces”，“children”：[{“标记名”：“Surface1”，“标记路径”：“>MyRootNode>ChildItems>ChildItems[2]>Surface1”，“children”：[]}，{“标记名”：“Surface2”，“标记路径”：“>MyRootNode>ChildItems>ChildItems[2]>Surface2”，“children”：[]}]
$scope.PlusMinusImage='../Images/Plus15.png'；
$scope.C15Image='../Images/C15.png'；
$scope.ShowHideCtrlFunc=函数（元素、事件）{
//log（“在函数ShowHideCtrlFunc中”）；
如果（$scope.PlusMinusImage=='../Images/Plus15.png'）{
$('.parent').droppable({
greedy: true,
hoverClass: "droppable-in",
...
});
.droppable-in {
border: 1px solid black;
background-color: yellow;
}
// hoverClass: "droppable-in",