li 태그의 여백을 클릭해도 onclick 이벤트가 발생하는 문제 ㅠㅠ

Question

안녕하세요,

----------------------------------------* { margin:0; padding:0; }a { text-decoration:none; } header{ width: 100% ; height: 100px; background-color:green;} content{ display: grid; grid-template-columns: repeat(5, 1fr); width: 1500px; min-height: 300px; background-color:beige; margin: 0 auto;} input { border-radius: 4px;}input:focus { border: 2px solid dodgerblue; outline: none; box-shadow: 0 0 0 3px lightblue;} .hidden{ display:none;} li>button{ margin-left:30px;} ------------------------------------- js는 hidden 클래스를 toggle 해주는 거 말곤 딱히 문제가 없어보입니다. li 안에 a태그를 넣었고, ##를 클릭할 때 form 이 toggle되는 걸 원하는데, ## 오른쪽 여백(빨간색으로 칠한 부분)을 클릭할 때도 왜 onclick 이벤트가 발생하는지.... ##만 클릭할 때 onclick 이벤트가 발생하고, 여백은 클릭해도 이벤트가 발생하지 않게 하려면 어떻게 해야할까요?구글링을 해도 마땅한게 없네요 ㅠㅠ

console.error() · Answer

li안에 a태그가 display: block으로 이루어져있지 않은지 확인해보시고혹시 모르니까 a태그 style에 display: inline; 한번 넣어보세요

hhj · Answer

저 li가 표시되는 크기를 브라우져에서 찍어서 확인해보세요

doru · Answer

a태그에 display:inline-block; 걸어주세요..inline-block를 걸어주면 특별히 다른 속성이 간섭하는게 아닌이상 딱 a태그에 들어가있는 문자만큼 line-height를 포함한 부피가 잡힙니다.

헤롱헤롱 · Answer

devprkms//말씀하신 대로 했는데도 여전히 똑같습니다 ㅠㅠ hhj//li 에 background-color를 해보니까 오른쪽 li 전까지 쭉 이어져있네요... 혹시 몰라서, li 에 display:inline을 하니까 해결되긴 했는데,li 왼쪽에 있는 0 기호가 사라지고, 무엇보다 문제는 display: grid 는 유지가 되나, 지금처럼 세로가 아닌가로 grid가 되어버립니다 ㅠㅠ display:inline-box는 지금과 똑같구요 ㅠㅠ doru//여전히 똑같습니다 ㅠㅠ

doru · Answer

아.. 지금에서야 봤는데 onclick이 li랑 a 둘다 들어가있네요..li의 onclick이 토글을 발생시키는거같은데 이러면 당연히 여백을 클릭해도 토글이 발생하겠지요..li태그에 display:inline-block을 걸어주셔요.. 아니면 a태그에 onclick&#61;&#34;showMeInput()&#34; 를..

헤롱헤롱 · Answer

doru // 일단 li 태그에 display:inline-block을 해도 똑같습니다. 그리고 a태그에 해보라고 하는 시도가 성공했습니다!!!제가 html 코드에 처음부터 a태그에 href&#61;&#34;&#34; 로 설정했기에 하이퍼링크로 이동되지 않도록 return false 에 대한 함수를 a태그 onclick 이벤트로 설정했는데, 이제보니까 href를 굳이 설정하지 않아도 되는 것 같네요. 그래서 li 태그에 있는 showmeInput 이벤트를 a태그에 옮겼더니 잘 실행되었습니다!! 감사합니다 ㅎㅎ

li 태그의 여백을 클릭해도 onclick 이벤트가 발생하는 문제 ㅠㅠ

6개의 답변

#li 목록