Javascript 话语注册重定向到URL而不是模态

我目前正在尝试更改Distanced install上用户注册的登录页

我正试图通过他们的管理面板在自定义中编辑Html/css，特别是在

部分，我也尝试将其放入

出于某些原因，此代码不会停止默认操作，也不会在单击时重定向用户

<script>
    var thingy = document.getElementsByClassName("sign-up-button")
    thingy.onclick ="return false;"
    thingy.onclick = function() {
        window.location.href = "https://join.domain.com";
    };
</script>

var thingy=document.getElementsByClassName（“注册按钮”）
thingy.onclick=“返回false；”
thingy.onclick=函数（）{
window.location.href=”https://join.domain.com";
};

当我试着这么做的时候

<script>
    var thingy = document.getElementsByClassName("sign-up-button");
    console.log(thingy.length);
    console.log(thingy)
    for (var i = 0; i < thingy.length; i++) {
            console.log('print this');
    };
</script>

var thingy=document.getElementsByClassName（“注册按钮”）；
控制台日志（长度）；
console.log（thingy）
对于（var i=0；i

---

它将thingy的长度显示为0，但随后它会打印一个html元素，但不会进行迭代，因为长度为0。您将需要选择一个、循环它们或使用jQuery

如果只想返回第一个按钮，则此操作有效。（thingy[0]）

var thingy=document.getElementsByClassName（“注册按钮”）
//thingy.onclick=“返回false；”
thingy[0]。onclick=function（）{
window.location.href=”https://www.google.com";
//返回false；
};

替换onclick事件时不需要“return false”

---

更好的选择是给按钮一个ID，然后使用getElementById来检索它。

问题似乎是对话使用了Ember。Ember作为客户端框架没有什么问题，但它似乎在脚本运行后向DOM添加元素。当脚本尝试添加事件侦听器后添加元素时，脚本不会做很多事情（如您所发现的）

我环顾了一下一个对话网页，发现这个按钮经常被添加到DOM中或从DOM中删除。这可能是因为

一种策略是延迟脚本，例如

async defer

、

requestAnimationFrame

或

setTimeout

，这样脚本运行时元素就已经存在了。因为我没有一个独立的页面来测试，所以我不能对此发表评论

我要演示的是如何在将元素添加到DOM时附加事件处理程序。在过去，你会使用，如大多数问题的答案所示。由于这些事件现在已被弃用，因此必须使用（看起来是）

有两个参数：目标元素和选项对象。目标元素是您在其上侦听突变事件的元素。从使用页面上的view source开始，似乎

正文

中没有太多有用的内容，因此我们将关闭

正文

。至于options对象，我们对

childList

突变和

subtree

感兴趣，因为按钮不是

body

的直接后代

回调函数（构造函数的唯一参数）将在事件发生时激发。此时您应该查找按钮并附加click事件处理程序。为了保持整洁，您可能需要检查按钮是否确实存在，如果存在，请断开MutationObserver。无需继续附加事件

为了完整性，我还喜欢调用函数立即附加事件，以防元素碰巧已经存在

请注意，即使在上下滚动时元素从DOM中删除并添加到DOM中，也只需附加事件一次。它似乎是同一个元素，因此事件侦听器仍然处于连接状态

您在评论中还提到，在附加了侦听器之后，模态仍然显示。您可以使用

.stopPropagation（）

停止该操作

顺便说一句，这种传播在某种程度上与您为什么不能执行简单的

$（窗口）有关。这适用于大多数动态创建的元素，但在本例中，底层应用程序也在侦听单击事件，显然阻止了事件冒泡

我的代码如下。我之所以使用jQuery，是因为我看到它出现在Distance的页面上

var targetNode = $('body')[0];

var attachEvent = function () {
  var $button = $('.sign-up-button');

  $button.on('click', function (e) {
    e.stopPropagation();

    // Do the redirect here
    console.log('gotcha');
  });

  if ($button.length) {
    console.log('hit');
    observer.disconnect();
  }
};

var callback = function() {
  console.log('mutation');
  attachEvent();
};

var observer = new MutationObserver(callback);

observer.observe(targetNode, { childList: true, subtree: true });

// Just in case...
attachEvent();

至于第二个脚本块，它对我来说运行良好，返回1，…，并“打印此”。您使用的是哪种浏览器？在Distance中部署时，此浏览器不起作用。出于某种原因，模态仍然会弹出，不确定是否是余烬覆盖了动作？长度显示为0，控制台返回
TypeError:thingy[0]未定义
，可能是他们在页面加载后更改按钮事件。如果将标记之间的代码粘贴到控制台中，然后单击按钮，会发生什么情况？如果这样做有效，那么您需要找到一种方法来延迟脚本的运行。这只是一个小小的进展，但仍然不是检查是否设置了任何其他事件，比如onmouseup。这似乎只在从外部文件加载供参考时起作用
var targetNode = $('body')[0];

var attachEvent = function () {
  var $button = $('.sign-up-button');

  $button.on('click', function (e) {
    e.stopPropagation();

    // Do the redirect here
    console.log('gotcha');
  });

  if ($button.length) {
    console.log('hit');
    observer.disconnect();
  }
};

var callback = function() {
  console.log('mutation');
  attachEvent();
};

var observer = new MutationObserver(callback);

observer.observe(targetNode, { childList: true, subtree: true });

// Just in case...
attachEvent();