Question

我有一个按钮，当点击时会打开一个新的标签，其中包含javascript中指明的网址。但是，一旦我把这个按钮放在figcaption中它可以点击，但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>

CSS：

.container-top-pics {
    width: 80%;
    margin: 0 auto;
    max-width:1140px;
}

img {
    max-width:100%;
}

.column-right-pic {
    float:left;
    width:29%;
    position: relative;
}

.column-right-pic figcaption {
    font-family: "Avenir";
    letter-spacing: 1px;
    color: #FFF;
    font-size: 1vw;
    font-weight: 100;
    text-align: center;
  position: absolute;
  z-index: 1000;
  height: 100%;
  width: 100%;
  top: 0;
  padding: 0 0 0 0;
  line-height: 5em;
}
.column-right-pic h1 {
    font-family: "Avenir";
    letter-spacing: 4px;
    color: #FFF;
    font-style: normal;
    font-weight: 100;
    text-align: center;
    font-size: 2vw;
    width: 100%;
    padding: 0% 0 0 0 ;
    line-height: 0;
}
.column-right-pic h2 {
    font-family: "Avenir";
    letter-spacing: 4px;
    color: #FFF;
    font-style: normal;
    font-weight: 100;
    text-align: center;
    font-size: 2vw;
    width: 100%;
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
}
.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%;
    height: 10%;
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
    background-image: url(../Images/button-reserve.jpg);
    border:none;
}
.button-ad:hover {
    background-image: url(../Images/button-reserve-hover.jpg);
    cursor: pointer; cursor: hand;  
}
.button-ad:active {
    background-image: url(../Images/button-reserve-click.jpg)   
}

使用Javascript：

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

Answer 1

迈克，问题不在于按钮本身的位置，而是你正在应用的样式，你实际上可以点击按钮，但你给了按钮一个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;
}

按钮功能OpenInNewTab在<figcaption>内部无法正常工作

1 个答案: