代码之家 › 专栏 › 技术社区 › SeaBass

Mousedown事件不会在select2下拉列表中触发

jquery-select2 html jquery javascript

SeaBass · 技术社区 · 7 年前

select2 列表,但它似乎删除了 mousedown 事件。尝试下面的代码片段,然后单击1、2、3中的一个。为什么警报没有打开?

$(".form-control").select2({
  templateResult: formatSelect2,
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
};

$(document).on('mousedown', '.statuses span', function(e) {
  alert('Why isn\'t this opening?');
});

.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

1 回复 | 直到 7 年前

Shashank 7 年前

是的,你说得对。 选择2 删除下拉容器上的事件。图书馆里有这么一行:

this.$dropdownContainer.on('mousedown', function (evt) {
  evt.stopPropagation();
});

解决方案:

获取select2的实例
绑定事件并检查mousedown是否在 状态跨度 使用 jQuery closest .

以下是方法:

var selectInst = $(".form-control").data('select2');

selectInst.$results.on('mousedown', function (e) {
   if($(e.target).closest('.statuses span').length) {
     var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
     alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);   
   }
});

综上所述,这里有一个片段:

$(".form-control").select2({
  templateResult: formatSelect2,
});

var selectInst = $(".form-control").data('select2');

selectInst.$results.on('mousedown', function (e) {
	if($(e.target).closest('.statuses span').length) {
  	var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
  	alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);	
  }
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}

.statuses {
  margin-left: 8px;
}
.statuses span {
  margin-left: 8px;
  cursor: pointer;
}
.statuses span:hover {
  margin-left: 8px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select class="form-control" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

编辑:

对所有实例应用相同的上述逻辑。

我添加了一个类对于要初始化select2的所有选择。使用该类,可以将以上内容应用于所有实例:

$(".render_select2").each(function () { 
  var selectInst = $(this).data('select2');
  selectInst.$results.on('mousedown', function (e) {
    if($(e.target).closest('.statuses span').length) {
      var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);  
    }
  });
});

$(".form-control").select2({
  templateResult: formatSelect2,
});

$(".render_select2").each(function () { 
	var selectInst = $(this).data('select2');
	selectInst.$results.on('mousedown', function (e) {
    if($(e.target).closest('.statuses span').length) {
      var data = $(e.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(e.target).html() + '\" from the value: ' + data);	
    }
	});
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}

左边距:8px;
}
左边距:8px;
光标:指针;
.状态范围:悬停{
左边距:8px;
颜色:红色;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

<select class="form-control render_select2" style="width: 300px">
  <option selected="selected" data-status="1">orange1</option>
  <option>white1</option>
  <option>purple1</option>
</select>

编辑二:回避 each select2:select 事件:

使用内置事件,这里是“更改:

$(".form-control").on('select2:select', function (evt) {
    var origEvent = evt.params.originalEvent;
    if($(origEvent.target).closest('.statuses span').length) {
      var data = $(origEvent.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(origEvent.target).html() + '\" from the value: ' + data);  
    }
});

$(".form-control").select2({
  templateResult: formatSelect2,
});

$(".form-control").on('select2:select', function (evt) {
	var origEvent = evt.params.originalEvent;
	    if($(origEvent.target).closest('.statuses span').length) {
      var data = $(origEvent.target).parents('li[aria-selected]').data('data').text || null; 
      alert('Clicked \"' + $(origEvent.target).html() + '\" from the value: ' + data);	
    }
});

function formatSelect2 (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<span data-status="' + data.element.getAttribute("data-status") + '">' + data.text + '<span class="statuses"><span data-status="1">1</span><span data-status="2">2</span><span data-status="3">3</span></span></span>'
  );
  return $data;
}

左边距:8px;
}
.状态范围{
左边距:8px;
光标:指针;
}
.状态范围:悬停{
左边距:8px;
颜色:红色;
}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<link href=“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css”rel=“样式表”/>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js”></script>
<option selected=“selected”数据状态=“1”>橙色</选项>
<选项>白色</选项>
<option>紫色</选项>
</选择>

<option selected=“selected”数据状态=“1”>橙色1</选项>
<option>白色1</选项>
<选项>目的1</选项>
</选择>

希望这能有所帮助(顺便说一句,我已经使用了v4.5版本,因为v4.6-rc似乎处于测试阶段)