css - onclick 适用于此单选按钮重新设计样式，但 onmousedown 不适用

Question

我有一组单选按钮，使用 onclick 时一切正常，但是当 onclick 替换为 onmousedown(或 ontouchstart，在开发人员模式下测试)时，checked+label 工作正常，但 HTML 中请求的警报没有。我之所以要替换onclick(用ontouchstart)是为了提高IOS中一个hybrid app的性能。任何线索我的问题是什么......我已经设法在 5 个月内从零编码到创建一个相当复杂的物理应用程序，而没有在任何地方发布一个问题，我对此感到非常尴尬!这是 HTML:

<div class="switch-field1">
                        <input type="radio" id="sine1" name="switch_3"  onclick = "alert('This works fine')" checked/>
                        <label for="sine1"> SINE  </label><br>
                        <input type="radio" id="square1" name="switch_3"  onmousedown = "alert('If I see this, problem solved')"/>
                        <label for="square1"> SQUARE </label><br>
                        <input type="radio" id="triangle1" name="switch_3"  onclick = "alert('This works fine')"/>
                        <label for="triangle1"> TRIANGLE </label>
                  </div>

这是 CSS:

.switch-field1 {
    font-family: "sans-serif", Tahoma, Verdana, Lucida ;
      padding: 0px;
      overflow: hidden;}
    .switch-title1 {
      margin-bottom: 3px;
      margin-left: 0px}
    .switch-field1 input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden}
    .switch-field1 label {
      float: left;}
    .switch-field1 label {
      display: inline-block;
      width: 100%;
      background-color: #e6ffe6;
      color: black;
      font-size:11px;
      text-align: center;
      border: 1px solid rgba(0, 0, 0, 0.2);}
    .switch-field1 input:checked + label {
      font-weight: bold;
      font-size: 12px;
      color: white;
      background-color: #009900;}

Answer 1

onmousedown事件有效，但仅在单选按钮上有效，在标签上无效。

您应该将事件监听器附加到标签本身，例如:

<label for="square1" onmousedown="alert('If I see this, problem solved')">SQUARE</label>

更新:

ontouchstart函数调用对我有用，但你需要在支持触摸的“设备”上使用它，我使用了开发工具下的 chrome 设备工具栏(ctrl+shift+j，左上角的移动图标)。

我使用了这个函数:

function whichbuttonID(){

  // need js to select the option
  document.getElementById("squarel").checked = true;
  alert('Ok');
}