Question

我正在开发的应用中，每个.ddlist都有一个动态.box。

<div id="app">
  <h2>MY LIST</h2>

  <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="hello list">
    <ul class="ddlist">
      <li @click.prevent="myalert()" v-for="item in hello"><a href="">{{item.text}}</a></li>
    </ul>
  </div>

 <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="there list">
    <ul class="ddlist">
      <li @click.prevent="myalert()" v-for="item in there"><a href="">{{item.text}}</a></li>
    </ul>
  </div>

</div>

我要实现的是，当用户专注于input时，下一个.ddlist应该可见。这是Javascript部分：

new Vue({
  el: "#app",
  data: {
    hello: [
      { text: "hello 1" },
      { text: "hello 2" },
      { text: "hello 3" },
      { text: "hello 4" }
    ],
    there: [
      { text: "there 1" },
      { text: "there 2" },
      { text: "there 3" },
      { text: "there 4" }
    ]
  },
  methods: {
    showDDList: function(e) {
            e.target.nextElementSibling.classList.toggle('active');
        },
    myalert: function() {
            alert("Hello world");
        },

  }
})

直到这里，我的代码都可以正常工作，并且.ddlist确实专注于input

接下来我要做的是，当用户单击.ddlist子a时，它应该触发绑定到它的@click事件。

有问题。现在，当用户单击a时，将不会显示任何内容。我注意到的是因为我正在切换display:block/none的CSS .ddlist，所以@click事件没有触发。

这是工作中的小提琴：https://jsfiddle.net/6y9mwh3u/

也许您可以借助其他方法来实现我的目标吗？

Answer 1

由于mousedown阻止了myalert的调用，因此您可以使用showDDList事件监听器在blur之前执行click。

new Vue({
  el: "#app",
  data: {
    hello: [
      { text: "hello 1" },
      { text: "hello 2" },
      { text: "hello 3" },
      { text: "hello 4" }
    ],
    there: [
      { text: "there 1" },
      { text: "there 2" },
      { text: "there 3" },
      { text: "there 4" }
    ]
  },
  methods: {
  	showDDList: function(e) {
			e.target.nextElementSibling.classList.toggle('active');
		},
    myalert: function() {
			alert("Hello world");
		},
    
  }
})

.box {
  display: block;
  padding: 10px;
  margin: 10px;
  border: 1px #ddd solid;
}
.ddlist {
  display: none;
  margin-top : 10px;
}
.ddlist.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>MY LIST</h2>
  
  <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="hello list">
    <ul class="ddlist">
      <li @mousedown.prevent="myalert" v-for="item in hello"><a href="">{{item.text}}</a></li>
    </ul>
  </div>
 
 <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="there list">
    <ul class="ddlist">
      <li @mousedown.prevent="myalert" v-for="item in there"><a href="">{{item.text}}</a></li>
    </ul>
  </div>
  
</div>

Vue JS click事件未触发

1 个答案: