Question

我正在开发一个必须在开始游戏之前观看视频的页面。视频和游戏链接在同一页面上。是否有一种简单的方法来锁定＆＃34;一个链接，直到单击一个单独的链接。这是一个按钮片段：

＆＃13;

<table class="t1">
        <tr>
            <th class="th1"><a href="<?php echo $video_url;?>" target="_blank"><div type = "button" class="button button1">Watch Video</div></a></th>
            <th class="th1"><a><div class="button button2">Objective:<div class ="desc"><?php echo $game_description;?></div></div></a></th>
            <th class="th1"><a href="<?php echo $construct_url;?>" target="_blank"><div type = "button" class="button button3">Play Game</div></a></th>
        </tr>
</table>

＆＃13;

Answer 1

如果您向客户端同时提供视频和游戏，则无需阻止客户端删除DOM中的限制。

假设是普通用户，您可以使用disabled属性来阻止某人点击按钮。一种更安全的方法是，根本不提供链接，在用户观看视频之后请求并添加（可能添加按钮但仅指定href属性，如果已观看视频）。

这显然必须使用JavaScript来完成。有几种解决方案涉及不提供链接，隐藏链接或使用HTML5 disabled属性来阻止点击按钮。

Answer 2

你真的没有按钮，而是锚，所以你可以阻止一个锚上的默认动作，直到另一个被点击，就像这样

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var skip = true;

btn1.addEventListener('click', function() {
  skip = false;
});

btn2.addEventListener('click', function(evt) {
  if (skip) evt.preventDefault();
});

<table class="t1">
  <tr>
    <th class="th1">
      <a href="test" target="_blank" id="btn1">
        <div type="button" class="button button1">Watch Video</div>
      </a>
    </th>
    <th class="th1">
      <a>
        <div class="button button2">Objective:
          <div class="desc">
            description
          </div>
        </div>
      </a>
    </th>
    <th class="th1">
      <a href="test" target="_blank" id="btn2">
        <div type="button" class="button button3">Play Game</div>
      </a>
    </th>
  </tr>
</table>

Answer 3

我为此使用JQUERY，你可能只是在点击按钮之前不显示链接，例如：

$(document).ready(function(){
    $("#showThisSecond").hide();
    $("#showThisFirst").click(function(){
       $("$showThisSecond").show();
    });
});

<button id='showThisFirst' />
<button id='showThisSecond' />

如果单击同一页面上的单独按钮，如何防止单击按钮？

3 个答案: