Question

如何在不转到 http://example.com 页面的情况下点击.no-click div ？任何人都可以帮助我吗？

以下是一个示例https://lajumate.ro/这是包含广告的网页，如果您将鼠标悬停在广告上，则分享按钮和保存按钮会显示，并且s clickable (the button位于广告内部

＆＃13;

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

＆＃13;

<a href="http://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

＆＃13;

Answer 1

正确的方法是使用stopPropagation，这是其历史别名cancelBubble的新方法，并取消事件冒泡。

在某些情况下preventDefault可以正常工作，但请注意，它不会取消冒泡但会产生类似的效果。

更新：除非它还与preventDefault合并，否则它似乎无效。稍后再看看，看看为什么会这样。

Stack snippet

var no_click = document.querySelector('.no-click');
no_click.addEventListener('click', function(e) {
  e.stopPropagation();
  e.preventDefault();    //temp. update, though this should NOT be needed
  console.log('hey');
})

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<a href="https://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

Answer 2

如何在不进入example.com的情况下制作.no-cick div clickable？有人能帮我吗？谢谢！

不确定。试试这个最简单和简单的理解方法。

这里的一行答案是：

添加onclick =“return false”。

为了让您更好地理解，请阅读以下内容：

你只需要在div上添加onclick函数并从中返回false。

<强> HTML

<a href="http://example.com">
  <div class="test">
     <div class="no-click" onclick="return stopRedirection();">

    </div>
  </div>
</a>

<强> JS

stopRedirection = () => {
    alert("Div Clicked!");
  return false;
}

我已经解决了以下给定链接的检查： jsfiddle example

希望这能解决您的问题。

Answer 3

<a href="http://example.com">
  <div class="test">
     <div class="no-click">

    </div>
  </div>
</a>

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}

<script type="text/javascript">
$('a').on('click', function(event){
    event.preventDefault();
})
</script>

Answer 4

一种方式是：

＆＃13;

var values = null;
while(true) {
    var currentSum = 0;
    var expectedSum = 10;
    values = [];
    while(expectedSum !== currentSum) {
        //var value = Math.floor(Math.random() * 9) + 1;
        var value = Math.floor(Math.random() * 4) + 1;
        if(value + currentSum > expectedSum) {
            continue;
        }
        currentSum += value;
        values.push(value);
    }
    if(values.length === 4) {
        break;
    } else {
        console.log('false iteration')
    }
}
console.log(values);

＆＃13;

document.querySelector('.no-click').addEventListener('click', function(e) {
  e.preventDefault(); // This line will prevent the browser from following the link
  // Other code you may want to run
});

＆＃13;

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}

＆＃13;

如果您只想将鼠标悬停在链接上时显示的光标类型（指针），则可以使用CSS：

＆＃13;

<a href="http://example.com">
  <div class="test">
     <div class="no-click">

    </div>
  </div>
</a>

＆＃13;

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}
.no-click:hover { /** A rule for the div when the user hovers over it */
  cursor: pointer;
}

＆＃13;

Answer 5

很容易做到，只是在点击a时阻止no-click元素的点击事件，如果不是这样，只需转到链接即可。检查下面的代码片段：

＆＃13;

$('.no-click').on('click', function(event) {
  event.preventDefault();
  alert('yeah, no need to go!')
});

＆＃13;

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  display: none;
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

.your-link:hover .no-click {
    display: block;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="your-link" href="https://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

＆＃13;

Answer 6

如果你愿意，可以从.no-click div中取出链接动作，但它应该在锚点上工作; 然后使用这两个块;

<script type="text/javascript">
$('.no-click').on('click', function(event){    
        event.preventDefault(); 
})
$('a').on('click', function(){
      document.ontouchmove = function(){ return true; }
})
</script>

if you want a also should not work then use only firs blcok!

Thanks!

如何防止grand-child元素的超链接

6 个答案: