Javascript：如何使此功能适用于点击效果答案

【问题标题】：Javascript: How to make this function working for click effectsJavascript：如何使此功能适用于点击效果
【发布时间】：2011-06-30 23:51:30
【问题描述】：

我正在设计一个页面，它以以下结构显示员工详细信息：

用户可以单击详细信息框中的任意位置，该复选框将随着详细信息<div> 框的类名的更改而被选中。

我面临的问题是，当我单击详细信息框中的任何位置时，它可以正常工作。但是当我单击复选框时，它只会更改类名，但不会对复选框进行任何更改。

还有一个条件，允许少数用户一次选择有限的员工，并且允许少数用户选择所有员工..

我已将 myClick() 函数分配给外部 <div> 框（带有红色边框的框）功能是：

var selectedCount = 0;
myClick = function(myObj,event)
{
    var trgt =(event.srcElement) ?  event.srcElement : event.target;
    tgName = trgt.tagName;
    //following statement gives me correct details element event though i clicked on any child tags
    theElem = (tgName == 'DIV') ? trgt : ( (tgName == 'B') ? trgt.parentNode.parentNode  : trgt.parentNode);

    if(allowed_selection == 'unlimited')
    {
        if(theElem.className == 'details_clicked')
        {
            theElem.className = 'details';  
            theElem.getElementsByTagName('input')[0].checked = false;
        }
        else if(theElem.className == 'details_hover')
        {
            theElem.className = 'details_clicked';
            if(tgName != 'INPUT') theElem.getElementsByTagName('input')[0].checked = true;
        }
    }
    else 
    {
        if(theElem.className == 'details_clicked')
        {
            theElem.className = 'details';
            theElem.getElementsByTagName('input')[0].checked = false;
            selectedCount--;
        }
        else if(theElem.className == 'details_hover')
        {
            if(selectedCount == allowed_selection ) return false;
            theElem.className = 'details_clicked';
                    //i think, this is the suspicious area for errors 
            theElem.getElementsByTagName('input')[0].checked = true;
            selectedCount++;
        }
    }
    return false;
};

【问题讨论】：

标签： javascript html javascript-framework

【解决方案1】：

问题是你的函数中有这些返回行：

return false;

当您将事件连接到执行操作的表单元素（例如复选框或按钮）时，返回 false 将阻止该默认操作。它会阻止事件像往常一样发生。

您可以在函数顶部尝试这样的操作：

var returnValue = (tgName == 'INPUT' && trgt.type == "checkbox") ? true : false;

然后在调用'return'时，使用：

return returnValue;

如果返回 true，则允许复选框正常工作并选中/取消选中自身。

【讨论】：