Question

不是实际的代码，但这基本上就是这个想法：

我有一个select标签，它位于一个锚标签内。

<a href="#rightTab">
  <select class="tab-options">
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
  </select>
  <span class="add-option">Add</span>
</a>

点击<a>应显示标签窗格。此外，我应该可以从<select>中选择一个选项。

目前我在处理后者事件时遇到问题。通过监控Firebug中的事件日志，我发现在第一次点击select（或option）后， mousedown 事件不再被触发。

我应该阻止哪些事件冒泡？

修改一些澄清：

每个锚都是li标记的子级。它们代表模型中的对象，并具有data-id属性。
- 除了添加“按钮”之外，还有两个额外的操作。两者都是add-option的兄弟姐妹。一个用于显示模态，另一个用于删除当前li

Answer 1

我不确定我是否理解你要做的事情，但首先你要纠正你的标记：

<select class="tab-options">
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
</select>
<a class="add-option" href="#rightTab">
    Add
</a>

然后，您使用onclick标记的<a>事件监听器来捕获<select>的值，并将其放在您想要的任何位置：

document.querySelector('.add-option').onclick = function(e){
    e = e || window.event;
    e.preventDefault();

    var optVal = document.querySelector('.tab-options').value;

    // Now do whatever you want with the value
}

Answer 2

好的。我花了一些时间弄明白，但最后我发现了一个解决方法。以下事件处理程序完成了这个技巧

$('.tab-options option').on('mousedown', function(e){
  e.stopPropagation();
  return false;
});

$('.tab-options').on('change', function(e){
  $(this).trigger('blur');
  return false;
});

以下是您尝试

的工作示例

$('[href="#rightTab"]').on('click', function(){
	console.log("Focus on <a>");
})

$('.add-option').on('click', function(e){
	var opt = $("#container").find(':selected').text();
	alert("Selected option: " + opt);
  e.stopPropagation();
})

$('.tab-options option').on('mousedown', function(e){
  e.stopPropagation();
  return false;
});

$('select.tab-options').on('change', function(e){
  $(this).trigger('blur');
  return false;
});

$('select.tab-options').on('click', function(e){
  e.stopPropagation();
  return false;
});

div#container {
  height: 50px;
  width: 200px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#rightTab">
  <div id='container'>
    <select class="tab-options">
      <option value="1">Test1</option>
      <option value="2">Test2</option>
      <option value="3">Test3</option>
    </select>
    <span class="add-option">Add</span>
  </div>
</a>

如何处理放置在锚点

2 个答案: