Не могу нажать на фоновое изображение тела для перенаправления - PullRequest
Новая
       19

Не могу нажать на фоновое изображение тела для перенаправления

0 голосов
/ 28 ноября 2018

У меня есть страница с центрированной позицией контента.На теле (позади этого div) есть фоновое изображение, и когда я нажимаю на видимую часть изображения, я должен перенаправить пользователя на другую ссылку.Проблема в том, что div находится над телом (и так и должно быть).Когда я нажимаю, я добавляю div.Я пробовал с 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 ]

0 голосов
/ 28 ноября 2018

Когда я получу ваш вопрос правильно, вы захотите перенаправить, если пользователь нажимает на тело, даже если щелчок находится внутри «отступа» контейнера с классом .tv-content?

Вы могли быДля этого сделайте следующее: 

// 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');
  }
});

Я сделал для этого простую демо .

0 голосов
/ 28 ноября 2018

Если я вас правильно понимаю, вы хотите нажать на тело.Тогда почему вы используете отступы по центру?Центрирование содержимого => body {min-width: 100%;минимальная высота: 100vh; дисплей: гибкий;justify-content: центр;align-items: center; }

Если вам нужна точная ширина, например, отступы, используйте 'calc' => width: calc (100% - 260px);высота: calc (100% - 180px); Теперь вы можете нажать на тело;Вы можете использовать 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>
0 голосов
/ 28 ноября 2018

Я считаю, что это то, что вы ищете, я исправил несколько ошибок, которые вы имели в вашей разметке.

Разметка: 

<?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;
}
...