fix(components): [radio checkbox] fix click event triggered twice

[FrontEndDog]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

if I using radio or checkbox in dropdown，@command will trigger twice

This problem is caused by input and label

look here

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at 4f66a48

• Prevent click events from bubbling up and triggering change events twice in checkbox and radio components (link, link, link, link, link, link)
• Add @click.stop modifier to el-button and el-checkbox components in checkbox-button.vue and checkbox.vue files (link, link, link, link)
• Add @click.stop modifier to el-button and el-radio components in radio-button.vue and radio.vue files (link, link)

[pull-request-triage]

👋 @FrontEndDog, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

[github-actions]

Hello @FrontEndDog, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=13936
Please comment the example via this playground if needed.

[ryuhangyeong]

It looks like a bug, but I wonder if there are many use cases for doing something with @click events on checkboxes and radio buttons. 🤔

[FrontEndDog]

It looks like a bug, but I wonder if there are many use cases for doing something with @click events on checkboxes and radio buttons. 🤔

Whether used or not, triggering a click event twice is itself an error。

I came up with a scene，if click card edge，Triggered once，if click radio，Triggered twice

look here

[ryuhangyeong]

cc @tolking

[tolking]

Thank for your contribution.

I do not think this is a BUG, You can use the change event instead of the click event.

If add the @click.stop to input, the click event will not be triggered when input is clicked, which is also unreasonable behavior.

[FrontEndDog]

Thank for your contribution.

I do not think this is a BUG, You can use the change event instead of the click event.

If add the @click.stop to input, the click event will not be triggered when input is clicked, which is also unreasonable behavior.

The issue you mentioned will only appear in the native input and label，will not appear in element plus。

because input in element-plus is hidden。

[FrontEndDog]

To supplement, This issue was discovered when I was using el-dropdown, if I use @change instead of @command, the change event will not be triggered when click the el-dropdown-item edge. This is not what I want.

So I should use @command, but @command will triggered twice when without click.stop, This is clearly a bug.

demo is here

[tolking]

The issue you mentioned will only appear in the native input and label，will not appear in element plus。
because input in element-plus is hidden。

what you said makes sense.

Thank for your contribution