onclick适用于这个单选按钮restyle,但onmousedown没有

时间:2018-05-14 19:50:18

标签: css

我有一组单选按钮,当使用onclick时一切正常,但当onmlick被onmousedown(或ontouchstart,在开发者模式下测试)替换时,checked + label工作正常,但是HTML中请求的警报没有。我想替换onclick(使用ontouchstart)的原因是为了提高IOS中混合应用程序的性能。 任何线索我的问题是什么......我已经设法从零编码到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;}

1 个答案:

答案 0 :(得分:0)

$1事件有效,但仅限于单选按钮,而不是标签。

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

onmousedown

更新

带有函数调用的<label for="square1" onmousedown="alert('If I see this, problem solved')">SQUARE</label>对我有用,但你需要在具有触控功能的'设备'上使用它,我使用了dev工具下的chrome设备工具栏(ctrl + shift + j,左上角的移动图标) )。

我使用了这个功能:

ontouchstart