Question

我有一个表，每行都包含一个单选按钮。我在这样的单选按钮上调用了一个JavaScript函数onclick事件

<input type="radio" id="rdbSelect" name="Select" onclick="MyFunction()" />

但是当我在键盘上按Down/Up箭头时，焦点会再次转到Next/Previous单选按钮功能调用。

我希望只有当鼠标单击单选按钮而不是焦点时才调用该函数。

这是我的代码

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>

和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");
}

任何帮助将不胜感激。

Answer 1

检查此处发布的答案：

https://stackoverflow.com/a/33400670/3780922

详细介绍了与处理点击/更改事件相关的所有跨浏览器问题，并详细介绍了鼠标事件技巧（如下所示）失败的地方。

焦点是一个棘手的问题，因为一旦无线电组（所有具有相同名称的无线电）被聚焦，箭头键将改变该值，从而触发change事件和click事件，这是通过浏览器完成的，与键盘导航兼容。

一个简单但非跨浏览器的解决方案如下：

$('input[name="radioButton"]').on("click", function(e) {

    if (e.clientX === 0 && e.clientY === 0) {
        console.log("keyboard");
    } else {
        console.log("mouse");
    };
}

Answer 2

你试试这个

 <input type="radio" name="rd1" id="red" onchange="myFunction()">select

代表： -

<html>
<body>
<input type="radio" name="rd1" id="red" onchange="myFunction()">select<br>
<script>

function myFunction() {
alert("radio selected");
}

 </script>

</body>
</html>

Answer 3

请试试这个

document.getElementById("rdbSelect").click()

Answer 4

我已经使用like this (jsfiddle)：

解决了这个问题

如果调用事件键盘down（甚至首先调用），则取消所有事件

<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();
  }
}

or using jquery (on jsfiddle)

<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();
  }  
}

Answer 5

你好你可以写这个你的javascript代码移动到头部

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

如何在单选按钮上调用Javascript函数单击不在焦点上

5 个答案: