mdl-menu 안에 mdl-textfield 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()});

페이지의 스 니펫 (snippet)을 방지 입력 필드의 이벤트 핸들러.

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