javascript-下拉链接Selectize.js

我试图在selectize下拉列表上放置一个链接,以便允许用户进行除选择项目以外的操作,同时仍允许用户选择该项目作为主要选项.

这是我要实现的示例(但未按预期工作)：

我所做的就是在HTML上插入链接.但这是行不通的,我想对于某种事件传播停止,是否可以使用selectize来实现？

还没有人回答,我想还有更多要说的,因此,这是我所做的一个例子：

render: {
    option: function(item) {
        return '<div><span>'+item.label+'</span>'
            + '<div class="pull-right">'
            + '<a href="#link">Link</a>'
            + '</div></div>';
    }
}

如您所见,我确实更改了“选项”渲染,并在纯HTML中插入了一个链接.问题是-如图上所示-当我确实单击链接时,浏览器没有跟随该链接,而是执行selectize的默认操作,即选择被单击的元素.

我要实现的是单击时使其跟随链接.

这是我所做的事情的一个小提琴：http://jsfiddle.net/uetpjpa9

解决方法:

根本问题是Selectize具有mousedown和blur处理程序,它们会在mouseup事件之前消除下拉菜单,该事件将完成您的链接正在等待的单击.如果没有Selectize的直接支持,要避免这种情况并不容易,但是由于其插件系统以及它为您提供的Selectize内部访问权限,有可能做到这一点.

这是一个plugin,它允许单击带有clickable类的下拉元素. (demo)

Selectize.define('option_click', function(options) {
    var self = this;
    var setup = self.setup;
    this.setup = function() {
        setup.apply(self, arguments);

        var clicking = false;

        // Detect click on a .clickable
        self.$dropdown_content.on('mousedown click', function(e) {
            if ($(e.target).hasClass('clickable')) {
                if (e.type === 'mousedown') {
                    clicking = true;
                    self.isFocused = false; // awful hack to defuse the document mousedown listener
                } else {
                    self.isFocused = true;
                    setTimeout(function() {
                        clicking = false; // wait until blur has been preempted
                    });
                }
            } else { // cleanup in case user right-clicked or dragged off the element
                clicking = false;
                self.isFocused = true;
            }
        });

        // Intercept default handlers
        self.$dropdown.off('mousedown click', '[data-selectable]').on('mousedown click', '[data-selectable]', function() {
            if (!clicking) {
                return self.onOptionSelect.apply(self, arguments);
            }
        });
        self.$control_input.off('blur').on('blur', function() {
            if (!clicking) {
                return self.onBlur.apply(self, arguments);
            }
        });
    }
});

要使用它,您需要将plugin选项传递给selectize调用(.selectize({plugins：[‘option_click’]})),然后将clickable类添加到下拉模板中的链接. (这是相当具体的.如果存在嵌套元素,请确保在第一次会看到mousedown事件的元素上单击clickable.)

请注意,这是一种相当棘手的方法,可能会有一些极端情况,并且如果有关Selectize调度事件的方式发生任何变化,则可能随时中断.如果Selectize自己会例外,那会更好,但是在项目赶上积压并更能接受请求和PR之前,这可能是最实用的方法.

标签：selectize-js,javascript,jquery
来源： https://codeday.me/bug/20191027/1947080.html