MDL菜单中的MDL文本字段Material-Design-Lite

Question

我正在尝试在mdl-menu内使用material-design-lite mdl-textfield 。

问题是，当我打开菜单并单击文本字段（ <input> ）时，它关闭了菜单。

有谁知道我可以在不手动重新创建/样式菜单的情况下避免这种情况？

这是示例代码：

 #button { margin-left:20px; margin-top:20px; } 

 <script src="https://code.getmdl.io/1.2.1/material.min.js"></script> <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet"/> <button class="mdl-button mdl-js-button mdl-color--blue mdl-color-text--white" id="button"> Open Menu </button> <ul for="button" class="mdl-menu mdl-js-menu"> <li> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="sample3"> <label class="mdl-textfield__label" for="sample3">Clicking here will close me :(</label> </div> </li> <li>item</li> <li>item</li> <li>item</li> </ul> 

更新资料

用一个快速的角度指令解决了这个问题：

.directive('stopPropagation', function() {
    return {
        restrict: 'A',
        link: function($scope, $element) {
            $element.on('click', function($event) {
                $event.stopPropagation();
            });
        }
    };
});

Answer 1

尝试为输入字段添加事件处理程序，以防止事件传播

document.querySelector('.mdl-textfield__input').addEventListener('click', function(e) {e.stopPropagation()});

请参见下面的代码段。

 #button { margin-left:20px; margin-top:20px; } 

 <script src="https://code.getmdl.io/1.2.1/material.min.js"></script> <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet"/> <button class="mdl-button mdl-js-button mdl-color--blue mdl-color-text--white" id="button"> Open Menu </button> <ul for="button" class="mdl-menu mdl-js-menu"> <li> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="sample3"> <label class="mdl-textfield__label" for="sample3">Clicking here will close me :(</label> </div> </li> <li>item</li> <li>item</li> <li>item</li> </ul> <script>document.querySelector('.mdl-textfield__input').addEventListener('click', function(e) {e.stopPropagation()});</script>