Javascript 按钮功能在新选项卡中打开，在内部不工作<；figcaption>；

我有一个按钮，当点击它时，会打开一个新的选项卡，其中包含javascript中声明的URL。然而，一旦我把这个按钮放在一个figcapton中，它是可以点击的，但是javascript不起作用。代码如下：

<div class="container-top-pics">
      <div class="row-top-pics">
        <div class="column-left-pic">
          <div class="col-inner">
            <img src="Images/sf-downtown.jpg">
              <figcaption>
                WELCOME TO THE<br />
                  <h1>DEAL GUIDE</h1><br />
              </figcaption> 
          </div>
        </div> 
          <div class="column-right-pic">
            <div class="col-inner">
              <img src="Images/sf-ad.jpg">
              <figcaption>
                SPECIAL DEALS<br />
                <h1>GET THEM</h1>
                <h2>NOW</h2>
                <button type="button" id="button-ad" class="button-ad" onclick="OpenInNewTab()">RESERVE NOW</button>
                </figcaption>
            </div>
          </div>
        </div>
      </div>  

Javascript:

document.getElementById('button-ad').onclick = function OpenInNewTab(url) {
  var win = window.open('http://www.example.org');
  win.focus();
}

---

Mike，问题不在于按钮本身的位置，而在于你正在应用的样式，你实际上可以单击按钮，但是你给了按钮10%的高度，所以你没有足够的区域来单击它，尝试删除“高度”属性，或者至少给它一个更大的区域来单击，干杯

顺便说一句，它在Chrome中运行良好，但因为Chrome将溢出的“文本”作为按钮的一部分，Firefox和其他可能不会

.column-right-pic .button-ad {
    font-family: "Helvetica Neue";
    letter-spacing: 1px;
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: .8vw;
    width: 45%;
    border-style: none;
    border-top: 2px solid #ffffff;
    /*height: 10%;*/
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
    background-image: url(../Images/button-reserve.jpg);
    /*background-color: #ff0000;*/
    background-color: transparent;
}

---

但它是有效的！另请参阅，您可以从html中的元素中删除onclick属性，因为您在JavaScriptI中创建了事件侦听器，我正在使用Firefox，这可能就解释了这一点！让我试着给按钮一个更大的尺寸，看看我是否可以点击它，有一个链接，我的意思是一个演示，所以问题可以缩小。TypeError：无法将属性“onclick”设置为null…好吧。。。。因此，请尝试在页面底部调用脚本，使用控制台也是一个很好的建议，您会遇到这个错误，因为您调用的对象尚未加载，很好的设计BTW不确定在页面底部调用脚本是什么意思？你能碰巧展示一个JSFIDLE吗？谢谢你的积极评论。当我试图复制你的代码时，我遇到了同样的问题，你有你的脚本在页面代码的顶部，按钮，中间，这个代码调用那个按钮，还没有加载，把脚本放在最后的体标签之前。

.column-right-pic .button-ad {
    font-family: "Helvetica Neue";
    letter-spacing: 1px;
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: .8vw;
    width: 45%;
    border-style: none;
    border-top: 2px solid #ffffff;
    /*height: 10%;*/
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
    background-image: url(../Images/button-reserve.jpg);
    /*background-color: #ff0000;*/
    background-color: transparent;
}