웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?마우스의 휠 버튼을 사용하는 경우 키보드의 커서키를 사용하는 방법 스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?# 스크롤의 이동을 막는 것이 필요한 경우언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서
Last Modified : 2017-12-11 07:34:19
자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다# 제이쿼리를 사용하여 마우스 위치 알아내기 만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가
Last Modified : 2017-12-11 07:54:43
제이쿼리 이벤트 메소드 중 하나인 hover()에 대하여 알아봅니다.제이쿼리는 다양한 이벤트 관련 메소드를 제공하는데요 만약 마우스를 특정 엘리먼트 위에 올리면 발생하게되는 이벤트 역시 제이쿼리를 사용하여 제어할 수 있습니다. 이때 사용하는 메소드가 바로 hover()입니다.$(jqeuryElement).hover(콜백함수)위는 간단한 문법으로 hover() 메소드 내부에 호출할 콜백을 추가하는 방법으로 사용합니다.# 제이쿼리 hover() 메소드이 메소드 hover()는 CSS의 :hover 선택자를 사용하는 것과 동일한 방식으로 동작합니다. 다만 css에 사용하면 새로운 스타일(style)을 적용하는 것이 목적이지만 hover()는 자바스크립트를 사용하여 다양한 조작이 가능한 점입니다. 즉 콜백 이벤트
Last Modified : 2019-08-06 20:15:11마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시
Last Modified : 2018-06-21 15:42:49만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다."마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.@ mouseover.vue<button v-on="mouseover: doMouseOver">Click Me</button><button @mouseover="doMouseOver">Click Me</button>methods: { doMouseOver: function() { // ... };}위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...v
Last Modified : 2018-09-28 11:01:45
웹페이지의 특정 요소 위에 마우스를 올릴 경우 기본 마우스 커서가 아닌 다른 마우스 커서가 나타나는 것을 볼 수 있습니다. 예를들어 뭔가가 실행 중인 경우 모래시계의 마우스 커서가 나타날 수 있고 또한 클릭 후 드래그를 수행할 경우 이동(드래그) 형태의 아이콘을 바뀌는 것처럼 말이죠.이처럼 마우스 커서는 현재의 상태를 알려줄 수 있는 좋은 인터페이스 역할을 하기도 합니다. 만약 CSS를 사용하여 마우스 커서를 변경하고 싶다면 어떻게 해야할까요? 이 경우 cursor 속성을 사용합니다.css의 cursor 속성은 다양한 마우스 커서를 선택할 수 있도록 도와줍니다. 이를 사용해 사용자에게 좋은 ui / ux 경험을 제공할 수 있으므로 상황에 따른 적절한 마우스 커서 변경은 반드시 필요하겠습니다. 그럼 아래에서는
Last Modified : 2019-08-25 20:32:54
자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.<script type="text/javascript">/* 클릭 이벤트 함수
Last Modified : 2017-08-28 12:31:36