下拉菜单上的链接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事件之前解除了dropdown，这将完成链接等待的点击。在没有Selectize的直接支持的情况下避免这种情况并不容易，但是由于它的插件系统以及它为Selectize内部提供的访问量，这是可能的。

这是plugin，允许点击类public void alertShow(String s){ new GameDialogFragment(s).show(getFragmentManager(), ""); } public void clickedYes() { SessionClass sessionClass = (SessionClass)getApplicationContext(); String str = sessionClass.getPlayer(); Intent i; if(null != str && str.contains("2")){ i = new Intent(MainActivity2.this, Game1_1.class); startActivity(i); } } public void clickedNo() { Intent intent = new Intent(MainActivity2.this, MainActivity2.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP | Intent.FLAG_ACTIVITY_NO_HISTORY); startActivity(intent); } 的下拉元素。 （demo）

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位于首先看到mousedown事件的那个元素上。）

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