Question

更具体一点，这里dojo sandbox我想在不打开下拉列表的情况下为tagList创建自定义点击监听器，但是即使所选节点是事件路径上的第一个，也不会使用preventDefault或stopPropagation实现它

Answer 1

向选项对象添加open事件处理程序，并在那里使用preventDefault，如果点击的元素是tagList：

＆＃13;

<!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>

＆＃13;

如何在点击时打开Kendo UI MultiSelect？

1 个答案: