Нажмите на div, кроме кнопки - Vue
У меня есть простой div шириной 100% с кнопкой в нем.
Проблема в том, что когда я добавляю событие клика в div, весь мой div становится активным (включая кнопку);
Я хотел бы сделать весь div доступным для клика другим методом, а кнопку - другим методом.
<div class = "full-width" @click = "method1">
<button @click = "method2">click me</div>
</div>
<script>
export default {
methods: {
method1() {
console.info("div is clicked")
},
method2() {
console.info("button is clicked")
}
}
</script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
это должно помочь.
<template>
<div id = "myDiv" @click = "handleDivClick">
<button id = "myButton" @click = "handleButtonClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleDivClick(event) {
if (event.target.id === 'myButton') {
// The button was clicked
// Do something here
} else {
// The div was clicked, but not the button
// Do something else here
}
},
handleButtonClick() {
// The button was clicked
// Do something here
},
},
};
</script>
если это не сработает, я предлагаю вам использовать ванильный javascript для реализации этого
важно не просто опубликовать код, но также включить описание того, что делает код и почему вы его предлагаете. Это помогает другим понять контекст и цель кода и делает его более полезным для тех, кто может читать вопрос или ответ, @Patric.
Моя ошибка, должно быть довольно очевидно, что код почти идентичен коду, предоставленному пользователем (в дополнение к некоторым комментариям в самом коде), я постараюсь объяснить все лучше в следующий раз, спасибо @DSDMark
есть два способа добиться этого vue:
- вы можете использовать
@click.selfнаdivи@clickнаbutton - вы можете использовать
@click.stopнаbuttonи@clickнаdiv
первый подход говорит div прослушивать только те события, в которых целью события является он сам, а второй говорит button остановить распространение события, и поэтому событие клика не достигает div
редактировать: добавлены оба подхода для элемента выбора
проверьте демо ниже:
new Vue({
el: '#app',
data: () => ({
msg1: '',
msg2: '',
msg3: '',
msg4: '',
}),
methods: {
method1(v) {
this[v] = 'clicked on div';
},
method2(v, elm = 'button') {
this[v] = `clicked on ${elm}`;
}
},
});<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id = "app">
<div style = "border: 2px solid red; width: 100%" @click.self = "method1('msg1')">
<button @click = "method2('msg1')">click me</button>
</div>
<div>{{ msg1 }}</div>
<div style = "border: 2px solid green; width: 100%; margin-top: 20px" @click = "method1('msg2')">
<button @click.stop = "method2('msg2')">click me</button>
</div>
<div>{{ msg2 }}</div>
<div style = "border: 2px solid blue; width: 100%; margin-top: 20px" @click.self = "method1('msg3')">
<select @click = "method2('msg3', 'select')">
<option value = "">--Please choose an option--</option>
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "hamster">Hamster</option>
<option value = "parrot">Parrot</option>
<option value = "spider">Spider</option>
<option value = "goldfish">Goldfish</option>
</select>
</div>
<div style = "text-align: right">{{ msg3 }}</div>
<div style = "border: 2px solid orange; width: 100%; margin-top: 20px" @click = "method1('msg4')">
<select @click.stop = "method2('msg4', 'select')">
<option value = "">--Please choose an option--</option>
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "hamster">Hamster</option>
<option value = "parrot">Parrot</option>
<option value = "spider">Spider</option>
<option value = "goldfish">Goldfish</option>
</select>
</div>
<div style = "text-align: right">{{ msg4 }}</div>
</div>Не удается выбрать элемент.
@power-cut обновил ответ и добавил оба подхода для элемента select.
Просто используйте @click.stop на кнопке и @click на div. Так :
<div class = "full-width" @click = "method1">
<button @click.stop = "method2">click me</div>
</div>Как насчет выбора элемента?
@power-cut , в этом случае используйте «@click.self» для родителя: <div class = "parent" @click.self = "onClickParent"> ... </div>
Это общая плохая практика - иметь события щелчка для каскадных элементов, не говоря уже о том, что div не должен быть кликабельным. Если вы все еще хотите попробовать, вам нужно будет проверить, отличается ли элемент, нажатый в методе 1, от вашей кнопки, используя
event.target