Javascript 当下拉菜单的onChange时，如何防止onclick事件？_Javascript

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

javascript

Javascript 当下拉菜单的onChange时，如何防止onclick事件？,javascript,Javascript,当下拉菜单更改时，如何防止点击事件？请查找下面的代码及其输出 <html> <head> </head> <body> <table> <tr onclick="onClick()"> <td> <select onchange="onChange()"> <option v

当下拉菜单更改时，如何防止点击事件？请查找下面的代码及其输出

<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>

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

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)">

关于事件，主要有两个方面需要涉及，event.stopPropagation和event.preventDefault

关于两者的区别有一个清晰的解释，请看一下

不管怎样，正如@duncan thacker在我之前所建议的那样，也许你应该考虑一下，这是否是举办onClick活动的正确地点。您强制它忽略对子对象的单击，但是如果您尝试使用另一个html结构，则可以避免该问题

您的两种解决方案都有效。谢谢，但为什么event.stopPropagation；在提供的代码中，onchange内部不起作用。您能澄清一下吗？更改事件与单击事件是不同类型的事件，因此您需要单独处理它们，即使它们几乎同时被触发。

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)">

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

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