如何在单选按钮上调用 Javascript 函数单击不焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32051486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call Javascript Function on radio button click not on focus
提问by Shaiwal Tripathi
I have a table which contains a radio button in every row. I am calling a JavaScript function onclickevent on radio button like this
我有一个表格，每行都包含一个单选按钮。我onclick在这样的单选按钮上调用 JavaScript 函数事件
<input type="radio" id="rdbSelect" name="Select" onclick="MyFunction()" />
But when I press Down/Uparrow in keyboard, focus goes to Next/Previousradio button function calls again.
但是当我按下Down/Up键盘上的箭头时，焦点Next/Previous再次转到单选按钮功能调用。
I want that function to be called only when radio button is clicked by mouse, not on focus.
我希望只有在鼠标单击单选按钮时才调用该函数，而不是在焦点上。
Here is my Code
这是我的代码
HTML
HTML
<div style="width:400px">
<table class="style1" id="Table1">
<tr>
<td>
<input type="text" id="text1" />
</td>
<td>
<input type="text" id="text2" />
</td>
<td>
<input type="radio" id="rdbSelect" name="Select" onclick="Test()" />
</td>
</tr>
</table>
</div>
and JavaScript
和 JavaScript
function CreateGrid() {
var Grid = document.getElementById('Table1')
for (var i = 1; i < 6; i++) {
var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
newrow.cells[0].innerText;
newrow.cells[1].children[0].value = '';
newrow.cells[2].children[0].value = '';
Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
}
}
function Test() {
alert("Hello");
}
Any help will be appreciated.
任何帮助将不胜感激。
回答by mix3d
Check the answer posted here:
检查此处发布的答案：
https://stackoverflow.com/a/33400670/3780922
https://stackoverflow.com/a/33400670/3780922
It details all the cross-browser problems associated with handling click/change events, and walks through where the mouse-event trick (as shown below) fails.
它详细介绍了与处理单击/更改事件相关的所有跨浏览器问题，并介绍了鼠标事件技巧（如下所示）失败的地方。
Focus is a tough problem, because once the radio group (all radios with the same name) is focused, the arrow keys will change the value, which fires the changeevent AND the clickevent, which is done via the browser for compatibility with keyboard navigation.
焦点是一个棘手的问题，因为一旦收音机组（所有具有相同名称的收音机）被聚焦，箭头键将更改值，从而触发change事件和click事件，这是通过浏览器完成的以与键盘导航兼容。
a simple but non-cross-browser solution is as follows:
一个简单但非跨浏览器的解决方案如下：
$('input[name="radioButton"]').on("click", function(e) {
if (e.clientX === 0 && e.clientY === 0) {
console.log("keyboard");
} else {
console.log("mouse");
};
}
回答by Gohel Dhaval
Hello You can Write this Move you javascript code to head section
你好你可以写这个把你的javascript代码移到head部分
<script>
function CreateGrid() {
var Grid = document.getElementById('Table1')
for (var i = 1; i < 6; i++) {
var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
newrow.cells[0].innerText;
newrow.cells[1].children[0].value = '';
newrow.cells[2].children[0].value = '';
Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
}
}
function Test() {
alert("Hello");
}
</script>
<div style="width:400px">
<table class="style1" id="Table1">
<tr>
<td>
<input type="text" id="text1" />
</td>
<td>
<input type="text" id="text2" />
</td>
<td>
<input type="radio" id="rdbSelect" name="Select" onclick="Test()" />
</td>
</tr>
</table>
</div>
回答by mukesh kumar Jangid
you try this
你试试这个
<input type="radio" name="rd1" id="red" onchange="myFunction()">select
for ex:-
例如：-
<html>
<body>
<input type="radio" name="rd1" id="red" onchange="myFunction()">select<br>
<script>
function myFunction() {
alert("radio selected");
}
</script>
</body>
</html>
回答by mukesh kumar Jangid
Please try this
请试试这个
document.getElementById("rdbSelect").click()
回答by deFreitas
I has resolved it using something like this (jsfiddle):
我已经使用这样的东西（jsfiddle）解决了它：
If the event keyboard down is called (called even first) so cancel all the events
如果调用事件键盘按下（甚至首先调用），则取消所有事件
<input type="radio" name="aradio" onkeydown="changeEvent(this,event)" onclick="changeEvent(this, event)" />Option one<br/>
<input type="radio" name="aradio" onkeydown="changeEvent(this,event)" onclick="changeEvent(this, event)" />Option two
window.changeEvent = function(element, event){
if(event.keyCode == 0){
console.log("click event");
//alert("click event");
}else{
console.log("keyboard event");
//alert("keyboard event");
event.preventDefault();
}
}
<input type="radio" name="aradio" />Option one<br/>
<input type="radio" name="aradio" />Option two
$("input[name=aradio]")
.on("click", changeEvent)
.on("keydown", changeEvent);
function changeEvent(event){
if(event.originalEvent.keyCode == 0){
console.log("click event");
//alert("click event");
}else{
console.log("keyboard event");
//alert("keyboard event");
event.preventDefault();
}
}
