Question

这很简单（我知道），但我无法弄明白。

发生了什么：

我有一个按钮触发动作的jsp（删除db中的特定记录）。但我观察到的是，单击按钮时动作会被触发三次，即使记录被删除也会导致错误消息。 jsp页面上有两个'divs'（父子）（参见下面的代码）。按钮位于儿童按钮中。

我发现了什么：

当我删除父div（使子节点为父节点）时，一切正常（当然除了父div正在执行的函数）。我读过这篇文章：

Event handler triggered twice instead of once

表明'事件冒泡'问题。我尝试添加stopPropagation();但是也没有锻炼。

也许简单的事情正在逃避我的注意力。请帮忙。

这是我的jsp代码：

<s:url id="scriptURL" action="getContactInfo" />
<sd:div href="%{scriptURL}" listenTopics="getContactInfo" formId="contactInfo" showLoadingText="false" preload="false">
    <s:url id="scriptURL1"  action='delContactInfo'/>
    <sd:div href="%{scriptURL1}" listenTopics="delContactInfo" formId="contactInfo" showLoadingText="false" preload="false">

        <s:actionerror/>
        <s:actionmessage/>
        <s:form name="contactInfo" id="contactInfo" action="editContactInfo">

            <sd:autocompleter id="contact"  name="contact"  label="Full Name " autoComplete="false" searchType="substring" list="contactList"  valueNotifyTopics="getContactInfo"/>
            <sd:autocompleter id="customer" name="customer" label="Company "   autoComplete="false" searchType="substring" list="customerList" valueNotifyTopics="getContactInfo"/>
            //////other controls////////


            //////other controls////////

            <s:submit id="submit" name="submit" value="Save Changes" align="center" onclick="saveEvent(event);"/>

        </s:form>

        <s:submit id="del" name="del" align="center" value="Delete" onclick="deleteEvent(event);"/>

    </sd:div>

</sd:div>

JS文件：

function deleteEvent(e)
{
    alert('Delete the selected account !!');
    alert('Are you sure?');
    dojo.event.topic.publish('delContactInfo');

    event = e || window.event;
    if ('bubbles' in event) {   // all browsers except IE before version 9
        if (event.bubbles) {
            event.stopPropagation();
            alert('1');
        }else {  // Internet Explorer before version 9
             event.cancelBubble = true;
            alert('2');
        }
    }else{
        event.cancelBubble = true;
        alert('3');
    }
}

function saveEvent(e){
    alert('Do you want to save the changes you made?');

    event = e || window.event;
    if ('bubbles' in event) {   // all browsers except IE before version 9
        if (event.bubbles) {
            event.stopPropagation();
        }else {  // Internet Explorer before version 9
            event.cancelBubble = true;
        }
    }else{
        event.cancelBubble = true;
    }
}

我想这个问题只存在于某个地方。因为在调用了这个正在完成其工作的动作之后。只是它被称为三次。但如果您觉得需要其他信息，请发表评论。

谢谢！

修改

Answer 1

如果你必须这样做内联使用这样的东西：

<prior stuff here>; var e = arguments[0] || window.event; e.stopPropagation();

将代码放在外部函数中并将其调用为更好：

onclick="handleEvent(event);"


function handleEvent(e)
{

   // function code

   // then
  event = e || window.event;
  if ('bubbles' in event) {   // all browsers except IE before version 9
     if (event.bubbles) {
       event.stopPropagation();
     }
     else {  // Internet Explorer before version 9
       event.cancelBubble = true;
     }      
   }
}

来自各个地方的示例，包括http://help.dottoro.com/ljgfjsxd.php

对于您的最新代码，我建议：

   <s:form name="contactInfo" id="contactInfo" action="editContactInfo">

        <sd:autocompleter id="contact"  name="contact"  label="Full Name " autoComplete="false" searchType="substring" list="contactList"  valueNotifyTopics="getContactInfo"/>
        <sd:autocompleter id="customer" name="customer" label="Company "   autoComplete="false" searchType="substring" list="customerList" valueNotifyTopics="getContactInfo"/>
        //////other controls////////


        //////other controls////////

        <s:submit id="submit" name="submit" value="Save Changes" align="center" onclick="saveEvent(event);"/>
        <s:submit id="del" name="del" align="center" value="Delete"   onclick="deleteEvent(event);"/>
    </s:form>

注意：两个提交按钮的格式相同。

Answer 2

请。请参阅下面的链接并使用由struts2提供的inbuild标签的标签。

How to restrict double click on button in struts /Java?

在单个事件上触发三次动作

2 个答案: