在optgroup中多選 - 事件的目標是optgroup

Question

我有select與一些optgroup s。

<select multiple style="height: 500px; width: 300px"> 
    <optgroup label="Colours"> 
    <option value="G">Green</option> 
    <option value="B">Blue</option> 
    <option value="Y">Yellow</option> 
    <option value="W">White</option> 
    <option value="P">Pink</option> 
    </optgroup> 
    <optgroup label="Numbers"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
    </optgroup> 
</select> 

我希望能夠點擊optgroup和選擇所有的孩子options。我發現點擊個人option時，事件仍然被解僱，所以通過測試e.target我可以確定目標是optgroup，然後只選擇孩子。

$(document).on("click", "optgroup", function(e) { 
    var target = $(e.target); 

    console.log(target); 

    if (target.is("optgroup")) { 
    target.find("option").prop("selected", true); 
    } 
}); 

小提琴這裏：https://jsfiddle.net/0z61fzs4/

到目前爲止，一切都很好。

然而，嘗試並通過點擊並拖動多選 - 在小提琴下方，只需從「One」拖動到「Three」即可。在這種情況下，事件目標最終是optgroup本身，而不是option，因此通過以這種方式選擇幾個選項，您最終將選擇optgroup中的所有內容。

此行爲僅在單擊並拖動類型選擇時發生。它不會發生在Ctrl並單擊多個選擇。

此外，如果您「跨越邊界」，則不會發生這種情況。例如，在附帶的小提琴中，如果您從「白色」開始，然後單擊並將其向下拖動到「三」，則您將從兩個不同的組中進行多重選擇。在這種情況下，目標結束爲option，並且行爲按預期工作。

我該如何允許我想要的點擊拖動類型的行爲，在一個optgroup內選擇多個options而沒有JS觸發並全部選中它們？

Answer 1

嘗試將您的點擊事件更改爲mouseup事件，並查看它是否按預期工作。

$(document).on("mouseup", "optgroup", function(e) { 
    var target = $(e.target); 

    if (target.is("optgroup")) { 
    target.find("option").prop("selected", true); 
    }; 
}); 

工作示例：https://jsfiddle.net/0z61fzs4/2/

Answer 2

也許你可以看看mousedown/mousemove的組合？請參閱以下主題以獲取更多信息：How to distinguish mouse "click" and "drag"