更具体一点，这里dojo sandbox我想在不打开下拉列表的情况下为 tagList 创建自定义点击监听器，但是 preventDefault 和 stopPropagation 都没有实现它，即使选定的节点在事件路径上是第一个
最佳答案
如果点击的元素是 tagList，则向选项对象添加一个 open 事件处理程序并在那里使用 preventDefault:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/grouping">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
<style>
.k-multiselect .k-multiselect-wrap {
display: flex;
}
.k-multiselect .k-multiselect-wrap ul {
counter-reset: multiselect-counter;
display: inline-flex;
padding-left: 5px;
}
.k-multiselect .k-multiselect-wrap ul li {
counter-increment: multiselect-counter;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
.k-multiselect .k-multiselect-wrap ul::after {
content: counter(multiselect-counter) ' chosen';
display: inline;
align-self: center;
padding: 2px 4px 0 0;
border-right: 1px solid rgb(103, 103, 103);
}
</style>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Customers</h4>
<input id="customers" style="width: 100%;" />
</div>
<script>
function checkInputs(elements) {
elements.each(function() {
let element = $(this),
input = element.children('input');
input.prop('checked', element.hasClass('k-state-selected'));
});
};
let open = false;
$(document).ready(function() {
$("#customers").kendoMultiSelect({
dataTextField: "name",
dataValueField: "id",
height: 400,
autoClose: false,
change: function() {
var items = this.ul.find('li');
checkInputs(items);
},
open: function(e) {
if (!open) {
e.preventDefault();
}
open = false;
},
tagTemplate: "<div onclick=''>TEST</div>",
itemTemplate: '<input type="checkbox"/><span class="k-state-default"> #:data.name#</span>',
dataSource: [{"name": "a", "id": 1, "group": 1}, {"name": "h", "id": 14, "group": 1},
{"name": "b", "id": 2, "group": 2}, {"name": "k", "id": 13, "group": 1},
{"name": "c", "id": 3, "group": 2}, {"name": "l", "id": 12, "group": 2},
{"name": "d", "id": 4, "group": 2}, {"name": "m", "id": 11, "group": 2},
{"name": "e", "id": 5, "group": 3}, {"name": "n", "id": 10, "group": 2},
{"name": "f", "id": 6, "group": 2}, {"name": "o", "id": 9, "group": 3},
{"name": "g", "id": 7, "group": 2}, {"name": "p", "id": 8, "group": 3}]
});
$("#customers").data('kendoMultiSelect').dataSource.group({"field":"group"});
$("#customers").data('kendoMultiSelect').wrapper.on('click', function(e){
if (e.target.id !== "customers_taglist") {
open = true;
$("#customers").data('kendoMultiSelect').open();
}
});
});
</script>
</div>
</body>
</html>关于javascript - 如何阻止 Kendo UI MultiSelect 在点击时打开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48619403/