Jak korzystać z Wybierz wewnątrz przycisku?

Question

Próbuję dowiedzieć się, w jaki sposób mogę umieścić zaznaczenie wewnątrz przycisku, dzięki czemu mogę użyć opcji wyboru, aby wybrać rzeczy, ale przycisk poza zaznaczeniem spowoduje inne kliknięcia.

Cały biały obszar to przycisk, a można go zobaczyć wewnątrz. Chciałbym użyć całego białego obszaru jako przycisku, a po wybraniu tego wyboru otworzy się.

Teraz przycisk onclick jest aktywowany, jeśli kliknę przycisk Wybierz.

Czy mogę utworzyć coś za pomocą jQuery, aby wykryć kliknięcie opcji wyboru i kliknięcie przycisku?

<button type="button" onclick="doStuff()" class="btn-lg btn-menu col-xs-6"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</button> 

Answer 1

Moje pierwsze rozwiązanie nie działa cross-browser, ponieważ HTML5 nie pozwala na interaktywne elementy (takie jak select) w ciągu przycisków.

Nowe rozwiązanie zastępuje przyciski z przęseł jak Jason van der Zeeuw zasugerował:

$('span').click(function(event) { 
 
    if(event.target.tagName === 'SPAN') { 
 
     alert('span pressed!'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    Button 
 
    <select> 
 
     <option value="mon">Monday</option> 
 
     <option value="tue">Tuesday</option> 
 
     <option value="wed">Wednesday</option> 
 
    </select> 
 
</span>

Answer 2

Można użyć Span-tag i styl go jako przycisku. W ten sposób zachowujesz swój kod czysty i ważny, a mimo to osiągasz swój cel.

<span class="btn-lg btn-menu col-xs-6" onclick="doStuff()"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</span> 

Answer 3

Uproszczony rozwiązanie:

<button type="button" onclick="doStuff(event)" class="btn-lg btn-menu col-xs-6"> 
    Button 
    <select> 
     <option value="mon">Monday</option> 
     <option value="tue">Tuesday</option> 
     <option value="wed">Wednesday</option> 
    </select> 
</button> 

<script> 
    function doStuff(event) { 
     if(event.target.nodeName === 'BUTTON') { 
      // do stuff 
     } 
    } 
</script> 

Answer 4

Według W3C HTML5 Specification element przycisk nie mogą mieć interaktywnych potomków:

Content model: 
Phrasing content, but there must be no interactive content descendant. 

Ponieważ opcja wyboru to interactive element, umieszczenie przycisku wyboru wewnątrz przycisku jest nieprawidłowe.

Po prostu z ciekawości próbowałem odtwarzać z właściwością z-index, aby zwiększyć kolejność stosów zaznaczenia.

JS Bin

Firefox następnie standard i nie pozwalają na interakcję select.

Oczywiście można użyć innej struktury dla elementu nadrzędnego.