下拉列表中的链接Selectize.js

Question

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

这是我想要实现的一个例子（但是没有按预期工作）：

我所做的是在HTML上明确地插入链接。 但它没有用，我想对于某种事件传播停止，是否有可能通过选择来实现？

---

还没有人回答，我认为还有更多要说的，所以，这是我所做的一个例子：

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

如您所见，我确实更改了“选项”渲染，并在纯HTML中插入了一个链接。 问题是 - 如图所示 - 当我点击链接时，浏览器不会跟随链接，而是执行选择默认操作，即选择点击的元素。

我想要实现的是在点击时使其跟随链接。

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

Answer 1

根本问题在于，Selectize具有mousedown和模糊处理程序，这些处理程序在mouseup事件之前解除了下拉列表，该事件将完成链接等待的点击。 在没有Selectize的直接支持的情况下避免这种情况并不容易，但是由于它的插件系统以及它为您提供Selectize内部的访问量，这是可能的。

这是一个插件 ，允许clickable可点击类的下拉元素。 （ 演示 ）

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);
            }
        });
    }
});

要使用它，您需要将插件选项传递给.selectize({plugins:['option_click']})调用（.selectize .selectize({plugins:['option_click']}) ）并将clickable类添加到下拉模板中的链接。 （这是相当具体的。如果有嵌套元素，请确保clickable是第一个看到mousedown事件的元素。）

请注意，这是一种相当糟糕的方法，可能有边缘情况，并且如果有关Selectize如何调度事件更改的话，可能会随时中断。 如果Selectize本身会做出这个例外会更好，但是在项目赶上其积压并且变得更容易接受请求和PR之前，这可能是最实用的方法。