JS点击移动替代品 - 在iOS和Android上也弃用了onclick

JS onclick mobile alternative - onclick deprecated on iOS and Android too

本文关键字：Android onclick iOS 移动 替代品 JS      更新时间：2023-09-26

我在HTML中有这个 

<div class="aplplyevent">
  <input type="hidden" name="type" value="" />
  <div class="hidden-div" id="hidden-div">
    Here is my form that is displayd on click and the button APPLY EVENT will disappear!(As long as my form already has a button!)
  </div>
  <span style="display:block"><button class="btn btn-applyevent" onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">APPLY EVENT</button></span>

这在 CSS 中：

.hidden-div {
  display: none;
}

在桌面设备上工作正常，但在 iOS 和 Adroid 上，我的主按钮"应用事件"不会消失，我有 2 个按钮，主按钮（谁停下来消失）和表单按钮。

自v8以来的iOS和现在的Android似乎也停止了对"onclick"的支持。

有人可以帮我吗？我是JS的初学者！

JSFiddle 这里

HTML onClick已被弃用，它仍然可以在所有主流浏览器中工作，但仍然被认为是一种不好的做法。最好将所有不同的代码系列分开。将您的javascript与HTML内联脚本分开，维护变得容易。因此，请尝试使用 Javascript 绑定事件，如下所示。

document.getElementById("applyEvent").addEventListener("click", function(){
    document.getElementById('hidden-div').style.display = 'block';
    this.style.display = 'none';
});
.hidden-div {
  display: none;
}
<div class="aplplyevent">
  <input type="hidden" name="type" value="" />
  <div class="hidden-div" id="hidden-div">
    Here is my form that is displayd on click and the button APPLY EVENT will disappear!(As long as my form already has a button!)
  </div>
  <span style="display:block">
  <button id="applyEvent" class="btn btn-applyevent">APPLY EVENT</button></span>

同样使用Jquery，代码将是最小的。我个人建议使用Jquery，因为它很棒。因此，使用Jquery可以重写相同的代码，如下所示。

$('#applyEvent').on('click',function(){
  $('#hidden-div').show();
  $(this).hide();
});

我认为最好使用jQuery。这可能会完成工作。

目录 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="aplplyevent">
  <input type="hidden" name="type" value="" />
  <div class="hidden-div" id="hidden-div">
    Here is my form that is displayd on click and the button APPLY EVENT will disappear!(As long as my form already has a button!)
  </div>
  <span style="display:block"><button class="btn btn-applyevent" id="buton">APPLY EVENT</button></span>

.JS

$(document).ready(function(){
  $("#buton").on('click touchstart',function(){
    $(this).hide();
    $(".hidden-div").css("display","block");
  });
});

我改用锚标签而不是在 href 属性中使用带有 javascript 函数的按钮。喜欢这个：

<a href="javascript: myFunction();" style=" border: #000000 1px solid; padding: 2px; text-decoration: none; background: #FF0000; color: #FFFFFF; "> click this button </a>

它支持我检查的所有浏览器，即PC IE，PC Firefox，PC Chrome以及IOS和Android上的移动浏览器。样式标签只是为了使链接看起来像一个按钮。我这样做的原因是因为我的网页上有多个按钮，所有按钮都是动态生成的，并且生成 javascript 代码来注册每个按钮似乎向浏览器抛出了很多额外的代码。

附言我的HTML代码如下所示：

<script type="text/javascript">
function myFunction(a){
// do something
}
</script>
<div id="a1">
<p> text here </p>
<a href="javascript: myFunction('a1')"> Button text </a>
</div>
<div id="a2">
<p> text here </p>
<a href="javascript: myFunction('a2')"> Button text </a>
</div>
<div id="a3">
<p> text here </p>
<a href="javascript: myFunction('a3')"> Button text </a>
</div>

等等...

我很确定有一种更好的方法来做我想做的事情，但这现在对我有用。

相关文章：