Question

The bounty expires in 20 hours. Answers to this question are eligible for a +50 reputation bounty. Ricardo Martins is looking for a canonical answer:

the confirm() was just an idea of some validation that could fail and block the remaining events to happen. The real scenario is that I need to encrypt the credit card data and perform some 3D authorization before the form is submitted OR the place order button is clicked. If the 3D auth or the encryption fails, I need to stop the order of being placed (triggered by the first listener). I cannot modify the other functions or listeners, because they may vary for each store. I was able to do this with jquery, but i m struggling to do with prototypejs.

我有一个地方命令,其中载有一个点击事件,它将执行一些任务,并通过阿加西发布命令。

我愿补充说,将在“<>之前”触发的另一次点击事件,并开展一些行动和验证。

视结果而定:

I would like to prevent the other events to be triggered
OR if success, just proceed and call the other click listeners.

然而,我为与PrototypeJS或纯粹的Java一道实现这一目标而努力。

这将是一个简单的例子,但当然,我尝试了许多不同的做法,包括过分严格的活动。

任何想法都受到赞赏。

var button = $( onestepcheckout-place-order-button )

//Original event
button.observe( click , function(e) {
  console.log( Order submitted )
})

// New event (I only have access to modify from here onwards)
button.observe( click , function(event) {

  if (confirm( Are you sure? ) === false) {
    console.log( The order should not be submitted )
    event.preventDefault()
    event.stopPropagation()
    return false
  }

  // The other events should be triggered (order submitted)
  button.fire( click )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
<button id="onestepcheckout-place-order-button" type="button"><span>Place order</span></button>

Answer 1

由此可见,虽然原型能够在国内储存这些事件,但我们不能像在Query那样获得。

我的solution是用纯粹的javascript,对原始的<<>/strong>加以掩饰,并在形式上添加一个活动。

这样,我就能够给原纽特注入一个布局,但是没有随附的事件,我就能够行使我的职能和进行鉴定,如果验证通行证,则触发原始纽扣代码<>click()。

在此,我做了以下工作:

var button = document.getElementById( onestepcheckout-place-order-button ) var form = document.getElementById( orderForm ) // some code will add one or more event listeners to the original button button.addEventListener( click , function(e) { console.log( Button clicked will submit form via ajax ) //ajax (the order may be placed via ajax. replace the webhook.site url with yours if you want to see it in action there) new Ajax.Request( https://webhook.site/25fab621-3f15-4d9f-ad87-3a746113adf2 , { method: POST , data: { name: John Doe , email: } }) }, false) // clone the button var newButton = button.cloneNode(true) // replace old button for the new button (with no events attached) button.parentNode.replaceChild(newButton, button) // just a generic function to validate and prevent default var validateAndPreventDefault = function(event) { event.preventDefault() // prevent the default behavior of the form/button if (confirm( Are you sure? ) === false) { // add condition here // if some condition is not met, prevent the form from being submitted console.log( The order should not be submitted ) return false } console.log( The order will bet submitted ) button.click() // trigger the click event on the old button return true // The other events should be triggered (order submitted) } // add the event listener to the form and the button, preventing the default behavior in both cases form.addEventListener( submit , validateAndPreventDefault, false) newButton.addEventListener( click , validateAndPreventDefault, false)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script> <form id="orderForm" method="post" action="#">  <button id="onestepcheckout-place-order-button" type="button"><span>Place order</span></button>  <button id="onestepcheckout-place-order-button-original" type="submit"><span>Submit button</span></button> </form>

Answer 2

我认为,你正在接受设置的浏览器的保护,这阻止了联合材料人为触发并非最初点击事件一部分的事件。例如,如果你触发事件,浏览器将阻止你触发点击事件。

在您的设想中,由于触发了<代码>confirm(>)方法,将点击活动的“流量”从一名手向另一人打断。

在我的建议中,将提交的订单摘录为一种单独的方法定义,以便在将事件采用这种方法时采用这种方法。最初的点击活动听众可以称之为这一方法,以及有“确保”的新方法<条码>。

function submitorder(event){
   //... original submit order
}

$( onestepcheckout-place-order-button ).observe( click ,submitorder);
// OR 
$( onestepcheckout-place-order-button ).observe( click ,function(event){

    if (confirm( Are you sure? ) === false) {
        console.log( The order should not be submitted )
        event.preventDefault()
        event.stopPropagation()
        return false
    }

    submitorder(event);
});

Answer 3

you need to attach a click event listener to the "Place Order" button, Then Inside the event listener, first perform some actions and validations using the validateOrder() function. If the validation somehow fails, prevent the default action of the click event, effectively preventing the order from being placed. and If the validation succeeds, we proceed with placing the order by calling the placeOrder() function, where you can put your AJAX call.

i 认为这样做。

友情链接