Vue's input event conflicts with the click event and loses focus first.

Scenario: When developing an app, I did a search and filter. As a result, every time I entered characters, I encountered a problem when I wanted to select data in the echoed list. There was no response when I clicked the first time, so I had to click the second time. The event will be triggered this time.
Reason for discovery: The final printing found that during the first click event, only the blur event of the input was triggered, and the click event was triggered for the second time, thus solving the problem.
Solution: Because the blur lost focus event in the input conflicts with the click event, refer to https://huaweicloud.csdn.net/63a003fddacf622b8df90f57.html , replace the button click event with the mousedown event, which takes precedence over the blur event, and finally achieves the correct effect, thanks!
Original code snippet:

<!-- 页面部分 -->
<view>
			<view
				v-for="(item,index) in stationList"
				:key="index"
				:class="item.isChoose?'stationEd':'station'"
				@mousedown="handleStation(item,index)"
			>
				<view>{
   
   {item.stationName.substring(0,18)}}{
   
   {item.stationName.length>18?'...':''}}</view>
				<u-icon v-if="item.isChoose" name="checkmark" size="18" color="#3D6FFF" class="icon"></u-icon>
			</view>
		</view>

Guess you like

Origin blog.csdn.net/duruo0/article/details/129716145