Question

当下拉菜单的onChange时如何防止点击事件？请找到下面的代码及其输出。

<html>
<head>
</head>

<body>
    <table>
        <tr onclick="onClick()">
            <td>
                <select onchange="onChange()">
                    <option value='1'>One</option>
                    <option value='2'>Two</option>
                    <option value='3'>Three</option>
                </select>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        function onClick() {
            console.log('on click event');
        }

        function onChange() {
            console.log('on change event')
            event.stopPropagation();
            event.cancelBubble = true;
        }
    </script>
</body>
</html>

请在下拉菜单中找到以下控制台输出

OUTPUT:

on click event
on change event
on click event

Answer 1

有两种方法可以做到这一点。您可以在onClick()函数中进行检查，以确定点击是否来自选择元素：

function onClick(clickEvent) {
    const clickedElementType = clickEvent.target.nodeName;
    if (clickedElementType !== 'select') {
        console.log('on click event');
    }
}

//make sure we pass the event through from HTML
<tr onclick="onClick(event)">

另一种方法是在您的onclick元素上放置一个<select>处理函数，并使用event.stopPropagation()防止它冒泡到<tr>元素上：

 function onSelectClick(clickEvent) {
     clickEvent.stopPropagation(); //this event won't hit the other click handler
 }

 //HTML
 <select onchange="onChange()" onclick="onSelectClick(event)">

Answer 2

与事件有关的事情主要有两件事，event.stopPropagation()和event.preventDefault()。

因此，对于两者之间的区别有一个清晰的解释，请查看What's the difference between event.stopPropagation and event.preventDefault?

无论如何，正如@ duncan-thacker在我面前建议的那样，也许您应该考虑一下是否是放置onClick事件的正确位置。您强迫它忽略对子项的单击，但是如果尝试使用其他html结构，则可以避免该问题。

下拉菜单的onChange时如何防止onclick事件？

2 个答案: