투명 div와 jQuery 호버의 불황을 통한 클릭 전달

그래서 나는 draggable youtube 비디오 위에 놓인 투명 div를가집니다. YouTube 동영상을 드래그 할 수는 있지만 동영상을 일시 중지/재생할 수는 없습니다. 이를 해결하기위한 방법은 버튼의 크기 (비디오 아래쪽) 인 div를 사용하는 것입니다. 사용자가이 버튼을 가리키면 객체는 더 이상 드래그 할 수 없습니다. 커서가 사라지면 객체를 다시 드래그 할 수 있습니다. 동영상의 대부분을 클릭하여 드래그 할 수 있습니다. 내가 클릭이 비디오에 통과 할 수 있도록로 CSS pointer-events: none;을 사용투명 div와 jQuery 호버의 불황을 통한 클릭 전달

는 여기에 문제를 inlies. 그러나 pointer-events:none; 일 때 jQuery는 mouseenter을 인식하지 못하기 때문에 마우스가 남아 있다고 가정하므로 드래그 가능한 객체 (지금)를 클릭하지 않게됩니다.

mousemovement가 해당 영역으로 이동했는지 확인하기 위해 해킹을 할 수 있지만 지루하고 일반적으로 마우스를 움직일 때마다 호출되는 기능이있어 매우 비효율적입니다. 웹 사이트. 나는이 방법으로 접근하지 않을 것입니다.

아이디어가 있으십니까?

편집 : 아이디어가 있으십니까? 코드가 필요하지 않습니다.

출처

2011-02-10 switz

mouseenter 및 mouseleave 이벤트에 CSS 속성 "pointer-events : none"을 추가하고 제거하는 방법은 어떻습니까? 그것을 테스트하지는 않았지만, 당신의 접근에서 시작하는 것이 쉬운 해결 일 것입니다. 그것이 작동한다고 가정하면) –

일단 포인터 이벤트가 활성화되면 호버가 비활성화되므로 작동하지 않습니다. 이것이 바로 문제입니다. – switz

'pointer-events'는 마우스와 관련된 모든 자바 스크립트 이벤트를 비활성화합니다. – JCOC611

드래그 메커니즘에 대한 제어 수준에 따라 다릅니다. 당신이 쓴 것처럼 들립니다. 그렇다면, 당신은 그것을 뒤로하고 있습니다. 드래그 할 수없는 영역을 차단하는 대신 드래그 할 영역을 활성화해야합니다. 그렇지 않으면 드래그 가능한 영역에 div를 배치하여 "드래그 핸들"로 사용해야합니다.

나는 당신이 무엇을 할 수 있는지 정말로 모른다. 이벤트 핸들러를 주변 DOM 또는 document.body 자체에 배치 할 수는 있지만 드래그 영역과 비 드래그 영역을 결정하는 데는 도움이되지 않습니다.

내 솔루션이 효과가 없다면 마우스 x/y 위치를 확인해야합니다. 그렇습니다. 번거롭고 약간 비싸지 만 플래시와 같은 것을 제어 할 수없는 외부의 외부 코드로 작업 할 때가끔 이런 일을해야합니다.

출처

2011-02-13 18:49:35 mwilcox

고마워, 나는 그저 반대 방향으로 접근했다고 생각해. 훌륭하게 작동합니다. – switz

-1

YouTube 동영상을 오버레이하는 div를 만들면 버튼을 전혀 덮지 않는 이유는 무엇입니까? 그런 식으로 마우스가 메인 "드래그"div에서 버튼으로 이동하면 끌기가 멈추고 클릭은 YouTube 요소 자체에있게됩니다.

출처

2011-02-10 21:06:55 futuremint

버튼이 YouTube에 포함 된 개체의 일부이기 때문에. 그것은 모두 하나의 div입니다. – switz

투명 div로 모든 것을 덮은 다음 버튼에 대한 모든 속임수 대신 mousedown/move/up 핸들러를 투명 div에서 사용하는 것이 더 간단 할 것이라고 생각합니다. 임베디드 div를 변경해야하는 경우에도 유지 관리가 훨씬 쉽습니다.

IIRC Internet Explorer가 완전히 투명한 div (!)에 대한 이벤트를 무시하므로주의하십시오.

출처

2011-02-13 18:56:00 6502

투명 div와 jQuery 호버의 불황을 통한 클릭 전달

답변

관련 문제