防止亚马逊支付按钮打开弹出窗口答案

【问题标题】：Prevent Amazon Pay Button from Opening a Popup Window防止亚马逊支付按钮打开弹出窗口
【发布时间】：2014-03-14 08:09:45
【问题描述】：

我有以下按钮（或链接），我正在参与亚马逊支付活动。

<a id="AmazonPayButton"></a>

招标如下：

var btn = OffAmazonPayments.Button("AmazonPayButton", "AmAzOnCoDeHerE", {
        type: "PwA", color: "LightGray",
        authorization: function () {
        loginOptions = { scope: "profile payments:widget payments:shipping_address" };
        taxes = "0";
        authRequest = amazon.Login.authorize(loginOptions, "https://SomeIpHere.com/payment.aspx?taxes=" + taxes);

    },
    onError: function (error) {
    }
});

现在有了jQuery，我定义了点击事件来做一些验证。

$("#AmazonPayButton").click(function(e){
    if(..) {
        //Allow
    }
    else {
        e.preventDefault();
        return false;
    }
});

我希望在else的情况下，弹出窗口不会打开，但它仍然会打开，我怎样才能阻止它打开？

【问题讨论】：

标签： javascript jquery html amazon-web-services amazon

【解决方案1】：

这有点猜测，因为我从未使用过OffAmazonPayments.Button，但是：如果它还在按钮上定义了click 处理程序，那么您正在做的事情不会阻止该处理程序运行。为此，请确保您使用 jQuery first 连接您的处理程序（在您为该链接调用 OffAmazonPayments.Button 之前），并在您的处理程序中使用 e.stopImmediatePropagation() 停止链接上的其他事件处理程序被调用。

这是一个示例 - 您当前用于“停止”事件的处理程序代码不会阻止同一级别的其他处理程序运行：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>stopImmediatePropagation Example</title>
</head>
<body>
  <div id="foo">click me</div>
  <script>
    (function() {
      $("#foo").click(function(e) {
        display("one");
        e.preventDefault();
        return false;
      })
      $("#foo").click(function() {
        display("two");
      })
      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>

但如果我们添加e.stopImmediatePropagation();，第二个处理程序将不再运行：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>stopImmediatePropagation Example</title>
</head>
<body>
  <div id="foo">click me</div>
  <script>
    (function() {
      $("#foo").click(function(e) {
        display("one");
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      })
      $("#foo").click(function() {
        display("two");
      })
      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>

旁注：如果您从 jQuery 事件处理程序中 return false;，则调用 e.preventDefault() 是多余的。 jQuery 看到false 返回值并为您调用e.stopPropagation() 和e.preventDefault()（但不是e.stopImmediatePropagation()）。

【讨论】：

我知道你的答案是 100% 正确的，但我在 jquery 点击事件之前/之后进行了竞标，但仍然没有运气:(
@AliBassam: :-( 嗯，这有点猜想。抱歉，这不是你需要的。我会留下一点，以便其他人可以看到不起作用，然后将其删除；希望到那时您会找到解决方案。最好，

【解决方案2】：

我意识到这是一个老问题，但由于我遇到了同样的问题并在这里遇到了这个话题，我认为这个答案可能会在未来对其他人有所帮助。

我同样需要进行一些验证，并可能阻止亚马逊支付按钮提交和创建弹出窗口。事实证明，解决方案实际上非常简单。只需在构建按钮时将您的验证代码插入到他们的授权函数中。在其中添加自己的函数引用时，您当然需要处理范围，但我将这个练习留给您。

给定原始代码sn-p，这里是一个例子：

var btn = OffAmazonPayments.Button("AmazonPayButton", "AmAzOnCoDeHerE", {
        type: "PwA", color: "LightGray",
        authorization: function () {
//// validation code added here
            if (!validationCheckPasses()) {  // your validation would go here
                return;  // don't allow button to submit if validation failed
            }
////
            loginOptions =
    { scope: "profile payments:widget payments:shipping_address" };
            taxes = "0";
            authRequest = amazon.Login.authorize(loginOptions, "https://SomeIpHere.com/payment.aspx?taxes=" + taxes);

        },

        onError: function (error) {
        }
    });

【讨论】：