下拉链接Selectize.js

问题描述：

我试图把一个链接放在selectize下拉列表中，以便允许用户进行操作而不是选择一个项目，同时仍然允许用户选择该项目作为主要选项。下拉链接Selectize.js

这里是什么，我想达到一个例子（但不按预期工作）：

我所做的显然是插入的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

你试过了什么？只是图像会让你失望票不答案。 –

我只是使用纯html链接呈现选项元素，我不认为需要代码，问题是selectize无法识别当我点击一个链接时，无论如何，这里是一个渴望双手的小提琴：http：///jsfiddle.net/fyor66ya – Alan

你已经注册了一些关于标签的事件 –

答

问题的根源是，Selectize已的mousedown和模糊的鼠标松开事件之前被解雇的下拉处理程序将完成点击您的联系是等待不断发生。如果没有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); 
      } 
     }); 
    } 
});

要使用它，你需要通过插件选项的selectize调用（.selectize({plugins:['option_click']})）和clickable类添加到您的下拉菜单模板的链接。（这是相当具体的，如果有嵌套元素，请确保clickable在首次看到mousedown事件的那个元素上。）

请注意，这是一个相当拙劣的方法，可能有边缘情况并可能在任何时间如果Selectize如何分派事件发生变化。如果Selectize本身能够做出这种例外，那将会更好，但在项目赶上积压并更容易接受请求和PR的情况下，这可能是最实际的方法。

下拉链接Selectize.js

相关推荐