下拉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中插入了一个链接。问题是，-as显示在图像上--当我单击链接时，浏览器不跟随链接，而是执行选择的默认操作，即选择单击的元素。

我想要实现的是，让它跟随链接时，点击。

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

Answer 1

根本的问题是Selectize有鼠标下移和模糊处理程序，这些处理程序在mouseup事件之前删除下拉列表，这将完成链接等待的单击。如果没有选择器的直接支持，要避免这种情况并不容易，但是由于它的插件系统和它为您提供的选择内部设备的访问量，这是可能的。

下面是一个插件，它允许单击类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']}))，并将clickable类添加到下拉模板中的链接中。(这是相当具体的。如果有嵌套元素，请确保clickable位于将首先看到mousedown事件的元素上。)

请注意，这是一种相当麻烦的方法，它可能有边缘情况，并且在任何时候都可能中断，如果选择分派事件的方式发生了变化。如果选择本身会使这个异常变得更好，但在项目赶上它的待办事项并变得更容易接受请求和PRs之前，这可能是最实际的方法。