mdl-menu material-design-lite 内的 mdl-textfield
mdl-textfield inside mdl-menu material-design-lite
我正在尝试在 mdl-menu
.
中使用 material-design-lite mdl-textfield
问题是,当我打开菜单并单击文本字段 (<input>
) 时,它关闭了菜单。
有谁知道如何在不手动 recreating/styling 菜单的情况下防止这种情况发生?
示例代码如下:
#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>
更新
通过快速 angular 指令解决了这个问题:
.directive('stopPropagation', function() {
return {
restrict: 'A',
link: function($scope, $element) {
$element.on('click', function($event) {
$event.stopPropagation();
});
}
};
});
尝试为输入字段添加事件处理程序,以防止事件传播
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>
我正在尝试在 mdl-menu
.
mdl-textfield
问题是,当我打开菜单并单击文本字段 (<input>
) 时,它关闭了菜单。
有谁知道如何在不手动 recreating/styling 菜单的情况下防止这种情况发生?
示例代码如下:
#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>
更新
通过快速 angular 指令解决了这个问题:
.directive('stopPropagation', function() {
return {
restrict: 'A',
link: function($scope, $element) {
$element.on('click', function($event) {
$event.stopPropagation();
});
}
};
});
尝试为输入字段添加事件处理程序,以防止事件传播
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>