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

时间:2019-02-06 09:24:37

标签: javascript

当下拉菜单的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

2 个答案:

答案 0 :(得分: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)">

答案 1 :(得分:0)

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

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

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