一个事件会触发三次动作

这是一种简单的(我知道)，但我不明白。

发生了什么:

我有一个jsp，上面有一个按钮触发一个动作(删除db中的特定记录)。但我观察到的是，当单击按钮时，操作被触发了三次，即使删除了记录，也会导致错误消息。jsp页面上有两个"div"(父-子)(参见下面的代码)。按钮在子按钮中。

我发现了:

当我删除父div(它使子div为父)时，一切都工作正常(当然，除了父div执行的功能)。我读了这篇文章:

事件处理程序触发两次而不是一次

提示"事件冒泡"问题。我试着添加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;
    }
}

我想问题只出在这里。因为在这个动作被调用之后它完成了它的工作。只是它被调用了三次。但如果你觉得需要额外的信息，请评论。

谢谢! !

编辑

如果你必须这样做，可以这样做:

<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>

请。参考下面的链接，使用struts2提供的内置标签。

如何限制双击按钮在struts/Java?

相关内容

最新更新

热门标签：