Javascript 防止默认

Posted 2023-05-08

技术标签:

【中文标题】Javascript 防止默认【英文标题】：Javascript prevent Default 【发布时间】：2021-12-28 16:39:39 【问题描述】：

我想要一个阅读更多按钮。我知道我的代码中的问题是 e.preventDefault 仅对 readmore ID 启用，但我希望它对 more_content ID 启用。

$("#readmore_01").click(function(e) 
  e.preventDefault();
  $("#more_content_01").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") 
    $(this).html("Read more");
  
);

$("#readmore_02").click(function(e) 
  e.preventDefault();
  $("#more_content_02").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") 
    $(this).html("Read more");
  
);

.wrapper 
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;


.img_01 
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;


.box 
  background-color: #d1d1d1;


.box_01 
  grid-row: 1 / span 1;
  grid-column: 2 /span 1;
  margin-right: 15px;
  background-color: #d1d1d1;


.box_02 
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
  background-color: #d1d1d1;


.content_01 
  grid-row: 2 / span 1;
  grid-column: 1 / span 3;
  margin-top: 20px;
  background-color: #d1d1d1;


.toggleBtn_01 
  cursor: pointer;
  color: #ff7c26;
  font-size: 115%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;


.toggleBtn_01:hover 
  color: white;


.more_content_01 
  display: none;
  grid-column: 1 / span 3;
  background-color: #d1d1d1;
  grid-row: 3 / span 1;
  position: relative;


.img_02 
  grid-row: 3 / span 1;
  grid-column: 1 / span 1;
  margin-top: 20px;


.box_03 
  grid-row: 3 / span 1;
  grid-column: 2 /span 1;
  margin-right: 15px;
  margin-top: 20px;
  background-color: #d1d1d1;


.box_04 
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
  margin-top: 20px;
  background-color: #d1d1d1;


.content_02 
  grid-row: 4 / span 1;
  grid-column: 1 / span 3;
  margin-top: 20px;
  background-color: #d1d1d1;


.toggleBtn_02 
  cursor: pointer;
  color: #ff7c26;
  font-size: 115%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;


.toggleBtn_02:hover 
  color: white;


.more_content_02 
  display: none;
  grid-column: 1 / span 3;
  background-color: #d1d1d1;

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>


<div class="wrapper">
  <div class="content_01" id="content_01">
    <div>Das ist ein toller Saugroboter</div>
    <div class="toggleBtn_01" id="toggleBtn_01">
      <i class="fa fa-plus" id="readmore_01"> Read more</i>
      <div class="more_content_01" id="more_content_01">
        <p style="display:none">Das ist mehr content</p>
      </div>
    </div>
  </div>

  <div class="content_02" id="content_02">
    <div>Das ist der zweite tolle Saugroboter</div>
    <div class="toggleBtn_02" id="toggleBtn_02">
      <i class="fa fa-plus" id="readmore_02">Read more</i>
      <div class="more_content_02" id="more_content_02">
        <p style="display:none">Das ich noch mehr content</p>
      </div>
    </div>
  </div>

  <div class="box_01">
    <p>DIE ERSTE BOX</p>
  </div>
  <div class="box_02">
    <p>DIE ZWEITE BOX</p>
  </div>
  <div class="box_03">
    <p>DIE DRITTE BOX</p>
  </div>
  <div class="box_04">
    <p>DIE VEIRTE BOX</p>
  </div>
  <div class="img_01">
    <img src="https://haushaltsautomatisierung.de/wp-content/uploads/2021/10/test.png">
  </div>
  <div class="img_02">
    <img src="https://haushaltsautomatisierung.de/wp-content/uploads/2021/10/test.png">
  </div>
</div>

<script src="https://haushaltsautomatisierung.de/wp-content/themes/bam-child/js/main.js" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

【问题讨论】：

你试过$("#more_content_01").click(e => e.preventDefault())吗？请参阅How to Ask。您需要修改您的演示，以便它显示问题。指向其他网站的链接不合适。抱歉不知道指向其他网站的链接不合适，@Terry 如果您的意思是这样 $("#readmore_01").click(function(e) $("#more_content_01" ).click(e => e.preventDefault()) $("#more_content_01").toggle("fast"); window.scrollTo(170, 170); let name = $(this).html(); $ (this).html("少读"); if(name == "少读") $(this).html("多读"); );它不起作用请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。 【参考方案1】：

这是一个解决方案（据我了解）：

为more_content ID 创建点击事件，并在事件中调用e.preventDefault()。

然后，点击readmore，触发more_content上的点击事件（使用jQuery）。

当您点击 readmore 时，这将在该 ID 上运行 e.preventDefault。

使用 jQuery 触发事件的一个例子是使用.trigger()

$("selector").trigger(event);

event 将是元素上的注册事件。

这是一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button1">Click</button> <button class="button2">Don't click</button>

<script>
// Event called when ".button1" is clicked
$(".button2").on("click", function(event) 
  alert("Hopefully you pressed .button1");
);

$(".button1").on("click", function(event) 
  $(".button2").trigger("click");
);
</script>

使用纯 javascript：

<button class="button1">Click</button> <button class="button2">Don't click</button>

<script>
// Event called when ".button1" is clicked
document.querySelector(".button2").addEventListener("click", function(event) 
  alert("Hopefully you pressed .button1");
);

document.querySelector(".button1").addEventListener("click", function(event) 
  document.querySelector(".button2").click();
);
</script>

当然，纯 JavaScript 不会像 jQuery 那样拥有所有的事件触发器。

这是我整理的一个工作示例：

$("#more_content_01").click(function(e) 
  e.preventDefault();
);
$("#more_content_01").click(function(e) 
  e.preventDefault();
);
$("#readmore_01").click(function(e) 
  e.preventDefault();
  $("#more_content_01").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") 
    $(this).html("Read more");
  
);

$("#readmore_02").click(function(e) 
  e.preventDefault();
  $("#more_content_02").toggle("fast");
  window.scrollTo(170, 170);
  let name = $(this).html();
  $(this).html("Read less");
  if (name == "Read less") 
    $(this).html("Read more");
  
);

【讨论】：

非常感谢您的详细回答。但它仍然无法正常工作。我想如果单击 more_content ，代码显示 preventDefault 的第一部分可能是失败，因为它将被单击的永远不会是 more_content 。我对吗？如果是，它认为我需要类似的东西： If "readmore".cickede.preventDefaul of more_content;但我不知道该怎么做 @Question__ 这根本不重要。事实上，您不应该在事件侦听器中绑定事件侦听器。这个答案应该达到你想要的：如果没有，那么你需要在问题本身中创建一个minimal reproducible example 来证明它，因为如果问题不能可靠地重现，那么我们就无法修复它。跨度>

以上是关于Javascript 防止默认的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 防止默认行为

如何使用 JavaScript 防止浏览器对退格按钮的默认历史返回操作？

在 Ajax 调用中的 JavaScript 中防止默认行为或标记单击事件

javascript 防止多次提交或执行(在规定时间段内只允许执行一次) 默认 3000ms

如何使用 Javascript 防止页面滚动上的剑道下拉列表折叠？

IE和其他浏览器中，JavaScript停止冒泡和阻止浏览器默认行为