Question

我在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上我的主按钮“APPLY EVENT”不会消失，我有2个按钮，主按钮（停止消失）和表单按钮。

iOS ，因为v8现在 Android太似乎停止了对“onclick”的支持。

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

JSFiddle Here

Answer 1

HTML onClick已被弃用，它仍然在所有主流浏览器中继续有效，但仍被认为是一种不好的做法。将所有不同代码族分开的良好做法。从HTML内联脚本中分离出你的javascript，维护变得简单。因此，尝试使用如下所示的Javascript绑定事件。

＆＃13;

document.getElementById("applyEvent").addEventListener("click", function(){
    document.getElementById('hidden-div').style.display = 'block';
    this.style.display = 'none';
});

＆＃13;

.hidden-div {
  display: none;
}

＆＃13;

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

＆＃13;

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

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

Answer 2

我认为使用jQuery更好。这可能会完成任务。

<强> HTML

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

Answer 3

我在href属性中切换到使用锚标记而不是带有javascript函数的按钮。像这样：

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

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

P.S我的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>

依旧......

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

JS onclick移动替代方案 - onclick在iOS和Android上也被弃用了

3 个答案: