文章/答案/技术大牛

发布

社区首页 >问答首页 >onclick需要在插入一些文本后单击几次

问onclick需要在插入一些文本后单击几次
EN

Stack Overflow用户

提问于 2017-12-20 05:12:49

回答 1查看 70关注 0票数 1

我需要一些帮助来理解我的代码的行为。假设有两个页面，通过单击第一个页面中的链接打开第二个页面，通过onclick="history.go(-1);“函数返回第一个页面，该函数运行良好。但是，如果我第一次使用getElementById- function在第二个页面的div中插入一些文本，则history.go(-1)函数将停止工作。或者它实际上是有效的，但需要几次点击。

我读到这是因为DOM模型改变了，但我不知道如何纠正功能。下面是两个页面的示例代码，

感谢您的帮助！

第1页；

<!DOCTYPE html>
<html>
<h2>
Please click the link below to open another page.<br>
From that page you should return back here by clicking Back-1 or Back-2.<br><br>
However, if you first click Read comments link, the Back-2 version does not work
or requires several clicks to work.<br><br>

<a href="details.php">Open details</a>
</h2>
</html>

第二页；

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #C1BDB0;
        }

        li {
            float: left;
        }

        li a {
            display: inline-block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: grey;
        }
    </style>

    <script >
        function getComments(){
            document.getElementById("infotxt").innerHTML = "This is a fake response from Ajax";
        }
    </script>
</head>
<body>  

<ul>
  <li><a href="<?php echo $_SERVER['HTTP_REFERER'] ?>">Back-1</a></li>
  <li><a onclick="history.go(-1);" href="#">Back-2</a></li>    
  <li><a onclick='getComments()' class='active' href='#'>Read comments </a></li>
</ul>

<div>
    <span id="infotxt"></span>
    <br><br>
    <h2>
    From this page you should return back to previous page by clicking 
    Back-1 or Back-2.<br><br>
    However, if you first click Read comments -link, the Back-2 version does 
    not work or requires several clicks (one double + one) to work.<br>
    The Back-1 version works in both cases.
    </h2>
</div>

</body>
</html>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-20 06:00:40

这个问题是由点击按钮后添加到url末尾的#引起的。要解决这个问题，可以像下面这样修改getComments函数，也可以为导航调用创建另一个函数。

function goBack(event){
    event.preventDefault();
    history.go(-1);
}

function getComments(event){
    event.preventDefault();
    document.getElementById("infotxt").innerHTML = "This is a fake response from Ajax";
}

同样，将您的标记更改为传入事件对象，如下所示：

<a href="#" onclick="goBack(event);">Back-2</a>
<a href='#' onclick="getComments(event);" class="active">Read comments</a>

event.preventDefault()是通过不执行默认点击行为来防止url被更改的行。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47895258

复制

相似问题

问onclick需要在插入一些文本后单击几次
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onclick需要在插入一些文本后单击几次EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onclick需要在插入一些文本后单击几次
EN