代码之家 › 专栏 › 技术社区 › Jeni Vasileva

无法单击要重定向的正文背景图像

background-image onclick html jquery

3

Jeni Vasileva · 技术社区 · 6 年前

我有一个内容居中的页面。在主体上(这个div后面)有一个背景图像,当我单击图像的可见部分时,我必须将用户重定向到其他链接。问题是div在body之上(应该是这样)。当我点击的时候,我在我试过的div的padding上 jquery 当点击div进行重定向时,但每次点击都是重定向的,我只想在点击图片背景时。

<? php echo '<body style="background-image: url(/tv/banners/main/main_banner_68_1.jpg);" class="tm-isblog" itemscope itemtype="http://schema.org/WebPage" id="background-body"  >';
echo '<div class="tv-content" onclick="showMsg()">';

这是这一页的内容

<script type="application/javascript">
        function showMsg(item) {
            alert('redirect me now');
    }  </script>

CSS:

body{margin:0;padding:0 !important;overflow-x:hidden;width:100%;}


.tv-content{margin: auto;width: 100%;border: 0px solid green;padding: 90px 130px;overflow: hidden;}

3 回复 | 直到 6 年前

1

2

axel.michel 6 年前

当我更正您的问题时,如果用户单击了正文,您想重定向,即使该单击位于容器的“padding”中,容器中有class.tv内容?

您可以通过执行以下操作来实现此目的:

// trigger the click event on body
$('body').on('click', function(e) {
  // get the real click target from the event object
  var elm = $(e.target); 
  // in case this element has no parents with the class, redirect 
  if (!elm.parents().hasClass('tv-content')) {
    console.log('redirect now');
  }
});

我做了一个简单的 demo 为此。

2

1

Insignian 6 年前

我相信这是你要找的,我已经修复了你的标记中的一些错误。

Markup:

<?php 
echo '<body style="background-image: url(/tv/banners/main/main_banner_68_1.jpg);" class="tm-isblog" itemscope itemtype="http://schema.org/WebPage" id="background-body">';
echo '<div class="tv-content" onClick="myFunction()"';
?>

jQuery:

function myFunction() {
// This is your alert message
var r = confirm("Do you really want to leave?");
if (r == true) {
// Where to redirect your users
window.location.href = "anotherwebpage.html";
}
else {
}
document.getElementById("demo").innerHTML = x;
}

3

0

Orozbek Askarov 6 年前

如果我没听错的话,你要点击身体。那你为什么要用垫子来居中? 将内容居中=>正文{最小宽度:100%;最小高度:100vh; 显示:柔体;调整资源中心;对齐项:中心; }

如果你想要像填充一样精确的宽度 '计算'=>宽度:计算(100%-260px);高度:计算(100%-180px); 现在,您可以单击body;您可以使用jquery或仅标记: 在代码段中

html,body{
  margin:0;
  padding:0 !important;
  overflow-x:hidden;
  width:100%;
  height: 100%;
  
  position:relative;
}

a {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

div {
  background-color: aqua;
  margin: 90px auto; 
  width: calc(100% - 260px);
  height: 100%;
  
  position: relative;
  z-index: 1;
  
  /*decor*/
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <a href="https://www.google.com" target="_blank"></a>
  <div>
    some text
  </div>
</body>